vuex

vuex作为Vue的官方状态管理库，遵循以下原则

1. 状态只读
2. 多个视图依赖同一个状态，共同维护一颗状态树
3. 相同状态，渲染出相同的视图
   下面是官方图解释：

1-1.png

初始化：

import Vuex from 'vuex'
Vue.use(Vuex);

// 建立一个store
const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment: function(state) {
      state.count++;
    }
  }
})

// 注入store
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')
// 访问state
{{this.$store.state.count}}
// 触发commit
 this.$store.commit('increment')
// 也可以传递参数payload
this.$store.commit('increment', n)

vuex里面的getter属性,Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

  getters: {
    doneTools: state => state.todos.filter(todo => todo.done),
  },
// 访问
store.getters.doneTodos 

Mutation(类似redux里面的reducer)
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

一条重要的原则就是要记住 mutation 必须是同步函数,现在想象，我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

actions(类似redux里面的middleware)
Action 类似于 mutation，不同在于：

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

 actions: {
    incrementSync: function({commit}) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
this.$store.dispatch('incrementSync')

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

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

const store = new Vuex.Store({
  modules: {
    articalDetailMoudule,
  }
})

对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState