前言：国庆归来，我们继续。
这章我们讲mapMutations和mapGetters这两个辅助函数，然后我们vuex基本的概念和使用方法到此就讲完了。
GitHub：https://github.com/Ewall1106/mall
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的整个流程和一系列的辅助函数的使用到处就讲完了，大家根据自己的业务需求相应处理；然后就是官网还有更高级的用法，大家也可以自行琢磨。
网友评论