Vuex是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 方便数据管理，避免数据重复加载，减少服务端压力。这个状态自管理应用包含以下几个部分：
state：驱动应用的数据源；
view：以声明方式将 state 映射到视图；
actions：响应在 view 上的用户输入导致的状态变化
NPM
npm install vuex --save 进行安装在pack.json可查看版本
Yarn
yarn add vuex
在使用webpack 打包使，必须通过 Vue.use(Vuex) 来安装Vuex：
核心概念
state：可理解为改模块定义了那些数据,可通过this.$store访问到。
Mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，如上图。在view 可使用 this.$store.commit("moduleA/stateChange", { name: "潘神" }); 调用
actions：Action 类似于 mutation，不同在于：
Action 是通过 mutation，而不是直接变更状态，上面已经说到，Mutation是改变state唯一方法
Action可操作任意异步函数，比如调用服务端请求。
Module：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。因此我们得学会拆分模块，每个模块对应自己state。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割，但是不建议嵌套多级。
const moduleA = {
namespaced: true,
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
namespaced: true,
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
export default new Vuex.Store({
modules: {
moduleA,
moduleB
}
})
注意：在使用拆分model时，namespaced=true，不然 this.$store会找不到对应model。
在View中的使用
在View中更改Model state
当没有异步网络操作更改是，我们可以直接操作
this.$store.commit("moduleA/stateChange", { name: "潘神" }); 来进行修改。
moduleA/stateChange：表示 moduleA 下面的同步更新函数 stateChange
{ name: "潘神" } 传递参数
如图名字已经更新。
如果进行异步操作更新，可以 this.$store.dispatch("moduleA/loadVote", {name:"心智"}) 其最终还是会走到同步更新函数stateChange 。因为前面已经说到 更改state 唯一方法就是mutations。
