前言:国庆归来,我们继续。
这章我们讲mapMutations和mapGetters这两个辅助函数,然后我们vuex基本的概念和使用方法到此就讲完了。
GitHub:https://github.com/Ewall1106/mall
1、mapMutations
(1)还是来看看这张图:
(2)通过这张图我们知道了vuex状态管理机制的一个大体步骤,但是,前面我有一点没提到,那就是在组件中,可以通过commit方法跳过1步骤直接提交mutations,如图:
(3)而mapMutations这种辅助函数不过就是为了简化操作:
2、Getter
(1)说mapGetters这个辅助函数之前,我们还需要将store仓库再拆分一个getters.js文件出来,那么,这个文件是干嘛的呢?
有时候我们需要从
store中的state中派生出一些状态,例如对列表进行过滤并计数。
Vuex 允许我们在store中定义“getter”(可以认为是store的计算属性)。就像计算属性一样,getter的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
(2)具体到我们的代码例子中,让我们把简单的问题复杂化,我们不直接获取state中的city值了,我们在getter.js中获取return返回state中的city值。
(3)然后我们还需要在index.js中注册
(4)然后我们就可以访问到return返回的值了
Getter 会暴露为 store.getters 对象,你可以以属性的形式访问这些值。
3、mapGetters
到这里快结尾了,你应该立刻明白这个辅助函数不过就是简化而已,不过这里有几点要注意一下,此辅助函数是个计算属性,所以:
- mapMutations放到methods下;
- mapActions放到methods下;
- mapGetters放到computed下。
4、小结
vuex的整个流程和一系列的辅助函数的使用到处就讲完了,大家根据自己的业务需求相应处理;然后就是官网还有更高级的用法,大家也可以自行琢磨。