前言:国庆归来,我们继续。
这章我们讲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的整个流程和一系列的辅助函数的使用到处就讲完了,大家根据自己的业务需求相应处理;然后就是官网还有更高级的用法,大家也可以自行琢磨。
共同学习,写下你的评论
评论加载中...
作者其他优质文章