一，前言

上一篇，主要介绍了 Vuex 插件机制的实现，主要涉及以下几个点：

• Vuex 插件机制分析；

• Vuex 插件机制核心逻辑实现:plugins 插件注册、subscribe 订阅收集、replaceState 状态替换；

本篇，继续介绍 Vuex 辅助函数的实现；

二，辅助函数的介绍

1，辅助函数的作用

继续以之前的代码作为示例：

可以发现，在项目使用 Vuex 插件中 State、getter、mutation、action 时，需要通过类似 这样一长串才可以实现，当模块层级较深就会变得更长；这种不太优雅的写法，也会影响到代码的可读性及后续运维；

所以，Vuex 插件提供了一系列辅助函数，用于简化和解决上边的问题；

2，辅助函数功能介绍

Vuex 提供了以下辅助函数：

• mapState：在组件的 computed 中使用；

• mapGetters：在组件的 computed 中使用；

• mapMutations：在组件的 methods 中使用；

• mapActios：在组件的 methods 中使用；

• createNamespacedHelpers：获取指定命名空间下的辅助函数；

三，Vuex 辅助函数的使用

官网 Vuex 插件提供的辅助函数对示例进行优化

1，辅助函数 mapState

2，辅助函数 mapGetters

3，辅助函数 mapMutations

4，辅助函数 mapActions

5，辅助函数 createNamespacedHelpers

四，Vuex 辅助函数的实现

1，辅助函数逻辑分析

辅助函数 mapState、mapActions、mapMutations，通过将 vuex.store 中的属性映射到 vm 实例上，从而实现通过 vm 实例可以直接访问到 vuex.store 中的属性，简化 Vuex 操作；

2，mapState 实现

创建 mapState 方法：根据指定状态名，返回状态对象；

// src/vuex/ helpers.js

/**
 * 根据指定状态名，返回状态对象
 * @param {*} stateArr 指定需要返回的状态名
 * @returns 状态对象
 */
export function mapState(stateArr) {
  let obj = {};
  for (let i = 0; i < stateArr.length; i++) {
    let stateName = stateArr[i];
    obj[stateName] = function () {
      // 从 $store.state 中查找状态名
      return this.$store.state[stateName]
    }
  }
  return obj
}

Vuex 插件导出 mapState 方法：

// src/vuex/index.js

import { Store, install } from './store';

export default {
  Store,
  install
}

export * from './helpers';

其他辅助函数同理，后续补充；

export function mapGetters(gettersArr) {
    let obj = {};
    for (let i = 0; i < gettersArr.length; i++) {
        let gettName = gettersArr[i];
        obj[gettName] = function() {
            return this.$store.getters[gettName]
        }
    }
    return obj
}

五，结尾

本篇，主要介绍了 Vuex 辅助函数的实现，主要涉及以下几个点：

• Vuex 辅助函数作用和功能介绍；

• Vuex 辅助函数使用介绍；

• Vuex 辅助函数原理分析与代码实现；

至此，《Vuex 源码学习笔记》专栏完结，后续将会继续完善扩充；

准备开始下一个源码专栏~