这些是我构建大型Vue项目得出的最佳实践，这些技巧将帮助你更高效的编码，并且使其更容易维护和协作。
在我今年的自由职业生涯中我有幸开发了一些大型Vue程序。我所说的这些项目使用了大量Vuex stores 😰 ，很多Vue组件（有数百个）和很多视图（pages）😄。对我而言这是非常有意义的经历，我发现了很多使扩展的方法。同时我还需要修复一些乱七八糟的错误用法。🍝
所以我将分享我的10个最佳实践，如果你有大型项目需要开发推荐你使用他们。
1. 使用Slots可以使你的组件更强大和便于理解。
最近我写了一篇文章some important things you need to know regarding slots in Vue.js。 主要讲了为什么使用Slots可以提高组件复用且易于维护。
但是这和大型Vue项目有啥关系呢。我将描绘一个使用他们解决你痛点的蓝图。
假如我要开发一个popup。起初看起来没有什么难点，仅仅是包括标题，描述和一些按钮。 所以把所有东西都当作props不就完了吗。 我用了三个自定义props，并且click按钮的时候触发一个事件。 就是这么简单！ 😅
随着项目的不断发展，业务需要显示许多其他新内容：表单字段，不同的按钮（取决于显示在哪个页面上）、卡片、页脚和列表。通过添加更多的props可以解决这个问题。😩但是随着业务发展，组件变的太复杂了。因为他包含了很多子组件，需要触发很多个事件。🌋我遇到了坑爹的问题，修改了一个功能后影响了其他page上的功能。我创造了一个怪物而不是一个可维护的组件！
但是，一开始使用slots可能会更好。最终我使小组件来重构这个组件。使他更容易维护、好理解、好扩展。
<template> <div> <div v-if="$slot.header"> <slot> </div> <div v-if="$slot.subheader"> <slot> </div> <div> <h1>{{ title }}</h1> <p v-if="description">{{ description }}</p> </div> <div v-if="$slot.actions"> <slot> </div> <div v-if="$slot.footer"> <slot> </div> </div> </template> <script> export default { props: { description: { type: String, default: null }, title: { type: String, required: true } } } </script>
根据经验在我看来，由熟练使用slots的开发人员构建项目对将来项目的可维护性有更重要的意义。
⚠️ 经验规则，当子组件中使用了父组件的props时，应该使用slots。
2.好好组织的你Vuex store
通常，一个新的Vue开发人员学习Vuex是因为两个问题：
当一个组件需要重一个比较远的组件（嵌套层级或者兄弟组件：译者注）访问数据时。
需要持有一个销毁组件的数据时。
这样他创建第一个Vuex store，学习moudles的用法并且组织程序时。💡
问题是创建modules时没有单一模式可循。我强烈建议一定要想清楚如何组织他们。据我所知，很多人更喜欢按照功能来组织他们（我也是：译者注）。例如：
Auth.
Blog.
Inbox.
Settings.
就我来说，用从API获得的数据模型组织更容易理解。例子：
Users
Teams
Messages
Widgets
Articles
用那个取决于自己，但是从长远来看组织良好的Vuex store更具生产力。这样也容易是新人融入并且继承你的初衷。
3.用Actions调用api和提交数据。
我的大部分（不是全部）API调用都在Vuex的actions中，你一定想知道为什么这样做。🤨
简单的说是因为拉取数据时需要在store中commit。还有就是他提供了我喜欢的封装和复用。其他原因就是：
如果我在两个地方（blog和home page）获取第一个页面的数据。我只需使用不同的参数调用即可得到数据，初次之外没有重复的代码被调用。
如果需要创建一些逻辑来避免重复拉取数据，只需要在一个地方拉取一次。除了给服务器减负以外，我还可以在任何地方使用这些数据。
我可以在actions中最终Mixpanel事件，基于维护性使问题变的容易分析。我的代码中大部分action中只有一个Mixpanel调用，😂我不必关注数据和发送这种工作方式太爽了。
4.使用mapState、mapGetters、mapMutations和mapAction精简代码。
当你在组件中访问state/getters或者调用actions/mutations时通常需要创建多个计算属性。使用mapState，mapGetters，mapMutations和mapActions可以将来自store modules中的数据集中在一个地方，这样可以精简代码并且更好理解。