Vuex 4源码学习笔记 - mapState、mapGetters、mapActions、mapMutations辅助函数原理（六）

在上一篇笔记中：Vuex 4源码学习笔记 - 通过dispatch一步步来掌握Vuex整个数据流（五）

我们通过dispatch的调用，一步步的看到Vuex的内部工作流程，这也是看源码的最好的方式，只要捋清楚大概主流程后，再去看那些细枝末节就容易多了。

今天我们就来看看这几个Vuex的辅助函数，分别为mapState、mapGetters、mapActions、mapMutations、createNamespacedHelpers，从名字看到，它们是辅助函数，意思就是，不用它们我们也可以使用Vuex，使用它们只不过是让我们更加方便的应用Vuex。

注意：这几个函数并不能使用在Vue3的Compositon API中，一会从下面的代码我们就可以看到，这几个辅助函数内都用到了this来访问当前的组件实例，而在Setup中，this还没有被创建，所以不能使用这些辅助函数。

mapState

使用方式

在组件中，如果我们需要访问Vuex中的，我们可以通过计算属性的方式

const Counter = {
   
   
  template: `<div>{
    
    { count }}</div>`,
  computed: {
   
   
    count () {
   
   
      return this.$store.state.count
    }
  }
}

但当一个组件需要获取多个状态的时候，就会写很多的计算属性，为了解决这个问题Vuex提供了 mapState 辅助函数帮助我们生成计算属性，可以少写一写代码，比如：

import {
   
    mapState } from 'vuex'

export default {
   
   
  // ...
  computed: mapState({
   
   
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
   
   
      return state.count + this.localCount
    }
  })
}

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

同样的，如果组件已经有其他的计算属性，我们也可以使用对象展开运算符进行添加

computed: {
   
   
  localComputed () {
   
    /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({