Vuex基础

一、Vuex 是什么？
Vuex是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

二、什么是“状态管理模式”？

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

这个状态自管理应用包含以下几个部分：

state，驱动应用的数据源；
view，以声明方式将state映射到视图；
actions，响应在view上的用户输入导致的状态变化。

三、核心概念
1、state
1）、单一状态树
Vuex 使用 单一状态树 —— 是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
2）、在 Vue 组件中获得 Vuex 状态
3）、mapState 辅助函数
4）、对象展开运算符
5）、组件仍然保有局部状态
使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

2、Getters
Vuex 允许我们在 store 中定义『getters』（可以认为是 store 的计算属性）。
3、Mutations
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
1）、提交载荷（Payload）
2）、对象风格的提交方式
3）、Mutations 需遵守 Vue 的响应规则
既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：
最好提前在你的 store 中初始化好所有所需属性。
当需要在对象上添加新属性时，你应该使用 Vue.set(obj, ‘newProp’, 123), 或者 -以新对象替换老对象。
4）、使用常量替代 Mutation 事件类型
5）、mutation 必须是同步函数
6)、在组件中提交 Mutations

3、Actions
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
1）、分发 Action：Action 通过 store.dispatch 方法触发
2）、在组件中分发 Action
3）组合 Actions
一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。

4、Modules
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
1）、模块的局部状态
2）、命名空间
a、在命名空间模块内访问全局内容（Global Assets）
b、带命名空间的绑定函数
c、给插件开发者的注意事项
3）、模块动态注册
在 store 创建之后，你可以使用 store.registerModule 方法注册模块
4）、模块重用

具体内容可参考API文档
Vuex 文档