Vuex中辅助函数mapxxx的实现分析

1、辅助函数的作用

Vuex安装阶段，store实例往每一个组件上混入beforeCreate钩子函数，添加一个指向它的 $store 实例。这样我们可以在组件中通过 $store 访问store的任何属性和方法。

但是当一个组件需要获取多个状态时，将这些都声明出来会重复和冗余，同样getter、mutation和action也这样的问题。于是Vuex提供了一系列mapxxx辅助函数来帮我们实现在组件中很方便的注入store的属性和方法。

辅助函数实现源码

2、实现

1、mapState

mapState目的是要构建成一个对象res，对象的元素是一个名称为mappedState的方法。目的是要扩展到组件的 computed 计算属性中。

1. 将Module的namespace标准化处理。‘mName’ => ‘mName/’
2. 将states对象或数组统一转成格式为 [{ key:1 , val:2 }] 的数组
3. 遍历数处理key和val，以key作为对象res的key，对应值是一个mappedState函数，在函数内部获取到 $store.getter和 $store.state。
4. 如果namespace存在，就通过namespace获取该层局部的module对象。 const module = store._modulesNamespaceMap[namespace]
5. 判断val是否是一个函数，若是就将state和getters作为参数传入得到state的值，否就直接返回值state[val]。

2、mapGetters

mapGetters和mapState类似。

1. 将Module的namespace标准化处理。‘mName’ => ‘mName/’
2. 将getters对象或数组统一转成格式为 [{ key:1 , val:2 }] 的数组
3. 拼接val = namespace + val 是因为getters的值以这样
   .
4. 返回this.$store.getters[val] 直接拿到当前模块的getter

3、mapMutations

mapMutations 支持传入一个数组或者一个对象，目标都是组件中对应的 methods 映射为 store.commit 的调用。

1. 将Module的namespace标准化处理。‘mName’ => ‘mName/’
2. 将mutations对象或数组统一转成格式为 [{ key:1 , val:2 }] 的数组
3. 遍历数组，以key作为对象的key，值是一个mappedMutation 函数
4. 从store中拿到commit方法，或者通过namespace获取改层的module，进而拿到局部的commit
5. 执行store的commit方法

4、mapActions

我们可以在组件中使用 this.$store.dispatch(‘xxx’) 提交 action，或者使用 mapActions 辅助函数将组件中的 methods 映射为 store.dispatch 的调用。

mapActions 和 mapMutations 的实现几乎一样，不同的是把 commit 方法换成了 dispatch。