近日由于项目重构用到了vue,我们使用vuex记录状态。开始看着比较懵,查阅大量资料之后对vuex进行一点点总结:
store 的四个属性:state, getters, mutations, actions
从上面的代码我们也可以看出,一个 store 有四个属性:state, getters, mutations, actions。
1、state。
state 上存放的,说的简单一些就是变量,也就是所谓的状态。没有使用 state 的时候,我们都是直接在 data 中进行初始化的,但是有了 state 之后,我们就把 data 上的数据转移到 state 上去了。当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。
为了解决这个问题,我们可以使用 mapState
辅助函数帮助我们生成计算属性:
其实就是把 state 上保存的变量转移到计算属性上。当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState
传一个字符串数组。
getters上简单来说就是存放一些公共函数供组件调用。getters 会暴露为 store.getters
对象,也就是说可以通过 store.getters[属性]来
进行相应的调用。mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性,其实也就是从 getters 中获取对应的属性,
跟解构类似。具体如下图
这样我们就可以将 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') } }