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