vuex学习总结 - 爱码网

近日由于项目重构用到了vue，我们使用vuex记录状态。开始看着比较懵，查阅大量资料之后对vuex进行一点点总结：

store 的四个属性：state， getters, mutations, actions

vuex学习总结

从上面的代码我们也可以看出，一个 store 有四个属性：state， getters, mutations, actions。

1、state。

state 上存放的，说的简单一些就是变量，也就是所谓的状态。没有使用 state 的时候，我们都是直接在 data 中进行初始化的，但是有了 state 之后，我们就把 data 上的数据转移到 state 上去了。当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。

为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性：

vuex学习总结

其实就是把 state 上保存的变量转移到计算属性上。当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

2.getters

getters上简单来说就是存放一些公共函数供组件调用。getters 会暴露为 store.getters 对象，也就是说可以通过 store.getters[属性]来

进行相应的调用。mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性，其实也就是从 getters 中获取对应的属性，

跟解构类似。具体如下图

vuex学习总结这样我们就可以将 getters 中的 evenOrOdd 属性值传给对应组件中的 evenOrOdd 上。Getters 接受 state 作为其第一个参数，

Getters 也可以接受其他 getters 作为第二个参数。

3、mutations

mutations 与事件类似，更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。所以 mutations 上存放的一般就是需

要改变 state 的一些方法。

eg:

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

要使用一个 mutation handler，需要以相应的 type 调用 store.commit 方法：

store.commit('increment')

若使用常量替代 mutation 事件类型的时候，一条重要的原则就是要记住 mutation 必须是同步函数。

4、Actions

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

actions: {
    increment (context) {
      context.commit('increment')
    }
  }

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过

context.state 和 context.getters 来获取 state 和 getters。
实践中，我们会经常会用到 ES2015 的参数解构来简化代码（特别是需要调用 commit 很多次的时候）：

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}