1、Vuex 简介
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
状态自管理应用包含以下几个部分：
state，驱动应用的数据源；
view，以声明方式将state映射到视图；
actions，响应在view上的用户输入导致的状态变化。
以上是一个表示“单向数据流”理念的简单示意。但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏，存在如下的情况：
a、多个视图依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
b、来自不同视图的行为需要变更同一状态。经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。
所以我们需要把组件的共享状态抽取出来，以一个全局单例模式进行管理。
2、Vuex 核心概念
1）State
Vuex 使用单一状态树，即一个对象就包含了全部的应用层级状态。它便作为一个“唯一数据源”而存在。Vuex 通过store选项，提供了一种机制将状态从根组件“注入”到每一个子组件中。由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态也是实时的。
2）Getters
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。Getter 接受 state 作为其第一个参数：
Getter 会暴露为store.getters对象，你可以以属性的形式访问这些值。
Getter 也可以接受其他 getter 作为第二个参数：
通过 this.$store.getters.doneTodosCount 可以很容易地在任何组件中使用它。
3）Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和 一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为increment的 mutation 时，调用此函数”。要唤醒一个 mutation handler，你需要以相应的 type 调用store.commit方法。
可以向store.commit传入额外的参数，即 mutation 的载荷（payload）。
在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读。
对象风格的提交方式
当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变。
Mutation 需遵守 Vue 的响应规则
既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。
这就要求我们必须遵守一些Vuex对应的规则:
a、提前在store中初始化好所需的属性.
b、当给state中的对象添加新属性时, 使用下面的方式:
方式一: 使用Vue.set(obj, 'newProp', 123)
方式二: 用新对象给旧对象重新赋值，可以利用对象展开运算符（...）。
一条重要的原则就是要记住mutation 必须是同步函数。调试工具devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。如果mutation 中存在异步函数的回调，mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。
当你调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢？在 Vuex 中，mutation 都是同步事务；为了处理异步操作，提出了Action。
4）Action
Action 类似于 mutation，不同在于：
a、Action 提交的是 mutation，而不是直接变更状态。
b、Action 可以包含任意异步操作。
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用context.commit提交一个 mutation，或者通过context.state和context.getters来获取 state 和 getters。
Action 通过store.dispatch方法触发。mutation 必须同步执行，Action 就不受约束！我们可以在 action 内部执行异步操作。
Actions 支持同样的载荷方式和对象方式进行分发：
在Action中, 我们可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve或reject。
5）Module
Module是模块的意思，Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.
当应用变得非常复杂时,store对象就有可能变得相当臃肿，为了解决这个问题，Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等。
对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。
对于模块内部的 action，局部状态通过context.state暴露出来，根节点状态则为context.rootState。
如果getters中也需要使用全局的状态, 可以接受更多的参数。根节点状态会作为第三个参数暴露出来。
actions和mutations的区别：
①action提交的是mutation，而不是直接变更状态
②actions用于处理一些异步事件，而mutations一般用于处理同步事件
③通过store.dispatch触发action，参数是vuex.store实例（因为modules需要获取上下文） 通过store.commit触发mutation，参数是state,payload
3、VueX 实现
实现一个插件：声明Store类，挂载$store。Store具体实现:
a、创建响应式的state，保存mutations、actions和getters；
b、实现commit根据用户传入type执行对应mutation；
c、实现dispatch根据用户传入type执行对应action，同时传递上下文；
d、实现getters，按照getters定义对state做派生。
