37、vuex初探（五）

前言：国庆归来，我们继续。
这章我们讲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的整个流程和一系列的辅助函数的使用到处就讲完了，大家根据自己的业务需求相应处理；然后就是官网还有更高级的用法，大家也可以自行琢磨。