vue --- Vuex（来自官网）

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。将组件的共享状态抽离出来，利用单例模式进行统一维护。它可以用来管理大型单页应用；

每一个Vuex 应用的核心，都是一个 store 库。Vuex 的状态存储是响应式的，且不能直接修改 store，需要显示提交 mutation。

1、核心概念

从 store 实例中读取状态最简单的方法就是在“计算属性”中返回某个状态。

【state】

--- mapState 辅助函数 ---

利用对象扩展运算符，可以将 mapState 和其它 Computed 属性一起使用

【getter】

Vuex 中的计算属性。

通过 store.getters.doneTodos 进行访问，也可以接受其它 getter 作为第二个参数：

使用：this.$store.getters.doneTodosCount。

也可以通过方法访问，给 getter 传参：

--- mapGetters 辅助函数 ---

【mutation】

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

Mutation 需遵守 Vue 的响应规则，修改数据时，这样做：
Vue.set(obj, 'newProp', 123) 或者 state.obj = { ...state.obj, newProp: 123 }。另外，mutation 必须是同步函数！

--- mapMutations 辅助函数 ---

【action】

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

分发 action ：store.dispatch('increment')

--- mapAction 辅助函数 ---

组合 Action：store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise。

async / await 模式：

【module】

局部化后，对应的方法参数为局部的参数，例如：state 是模块本身的 state。如果需要全局的 state，则需要 routeState。

routeGetter、routeActions、routeMutations 同样的道理。

vuex-router-sync 插件就是通过动态注册模块，将 vue-router 和 vuex 结合在一起，实现应用的路由状态管理。

模块重用时，通过返回一个函数，来避免相互之间的影响。

2、项目结构

应用层级的状态应该集中到单个 store 对象中。

提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。

异步逻辑都应该封装到 action 里面。

3、插件

在插件内提交 Mutation：

通过提交 mutation，插件可以用来同步数据源到 store。例如，同步 websocket 数据源到 store（下面是个大概例子，实际上 createPlugin 方法可以有更多选项来完成复杂任务）：

内置 Logger 插件：

4、严格模式

不要在生产环境下启用严格模式。

const store = new Vuex.Store({
    // ...
    strict: process.env.NODE_ENV !== 'production'
})

5、表单处理

<input v-model="obj.message"> 的困惑。

 

更好的方法是利用双向绑定的计算属性，例如：

6、测试

暂时略过

7、热重载

Vuex 支持在开发过程中热重载 mutation、module、action 和 getter。

个人统计【2】：2019-05-24、2019-05-25