Vuex最佳实践

[ghost]

Vuex最佳实践

vuex设计规范（BB鸟规则）

1. 不要把只属于本模块或者组件的临时状态放入vuex。

   例如：当前页面的滚动位置、按钮的点击状态。

2. 不要把需要实时刷新的数据放入vuex。

   例如：设备温度监控数据。

3. 不要把需要动态刷新的数据放入vuex。常见标志：清空老数据。

   例如：列表的详情页数据，详情页每次根据新的id请求新数据，如果通过vuex管理，则需要每次在进入详情页时清空之前的数据。如果不清空，在新数据返回之前显示的是老数据。

4. 不要把一次性数据放入vuex。

   例如：新增接口只返回了新增成功与否的提示信息，该类接口数据不要放入vuex。

5. 跨模块共享的数据应该放入vuex。

   例如：当前用户信息、字典表。

6. 对数据的操作逻辑复杂（一般是对列表的新增、删除、切片、转换、过滤、选中等），或者需要时间旅行（前进、后退、撤销）时，一定要通过vuex实现。

vuex使用规范

1. 【强制】所有的数据应该通过getter获取，避免直接从state获取。
2. 【强制】所有的改变应该通过action发起，避免直接发起mutation。
3. 【强制】除全局（常量、常用）state外，均应该使用命名空间。
4. 【强制】action命名统一以动词开头。例如：changeXXX、getXXX。
5. 【强制】mutation type应该常量化。【建议】action type也常量化。
6. 【强制】尽可能保持state的简洁。永远不要把对象直接赋值给state，或者解构遍历对象的键值对，然后赋值给state。

   避免这样赋值：state = User，应当这样赋值：state.user = User

7. 【建议】尽可能考虑使用不可变数据。

   例如：state.user = { ... User }、state.posts = [...postList]

8. 【建议】避免state结构嵌套太深，尽可能考虑扁平化。