【造轮子系列】面试官问：你能手写Vuex吗 (三)？

map 辅助函数是 Vuex 提供的一种方便的方式，用于将 Vuex 中的状态、getters、mutations 和 actions 映射到 Vue 组件中的本地状态、计算属性、方法和动作。

map 辅助函数

使用方法

• mapState(namespace?: string, map: Array<string> | Object<string | function>): Object

这里以 mapState 为例，简单看下 map 辅助函数的三种使用方法，如下：

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

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

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

如果不考虑 namespace，以数组为例，可以很简单的实现实现 mapState 方法：

const mapState = args => {
    let states = {}
    args.forEach(item => {
        states[item] = function () {
            return this.$store.state[item]
        }
    })
    return states
}

normalizeMap

由于用户传入可能为数组或对象，首先需要格式化参数格式

function normalizeMap(map) {
    return Array.isArray(map)
        ? map.map(key => ({ key, val: key }))
        : Object.keys(map).map(key => ({ key, val: map[key] }))
}

normalizeNamespace

根据 namespace 配置，对开启命名空间的模块，拼接路径参数

function normalizeNamespace(fn) {
    return (namespace, map) => {
        if (typeof namespace !== 'string') {
            map = namespace
            namespace = ''
        } else if (namespace.charAt(namespace.length - 1) !== '/') {
            namespace += '/'
        }
        return fn(namespace, map)
    }
}

getModuleByNamespace

获取 namespace 对应的 module 模块，注：这里可以参考 namespace 一节中的数据结构，就很容易理解

function getModuleByNamespace(store, helper, namespace) {
    const module = store._modulesNamespaceMap[namespace]
    if (!module) {
        console.error(`[vuex] module namespace not found in ${helper}(): ${namespace}`)
    }
    return module
}

mapState

export const mapState = normalizeNamespace((namespace, states) => {
    const res = {}
    normalizeMap(states).forEach(({ key, val }) => {
        res[key] = function mappedState() {
            // 根模块 state、getters
            let state = this.$store.state
            let getters = this.$store.getters
            if (namespace) {
              	// 通过 namespace 拿到相应的模块
                const module = getModuleByNamespace(this.$store, 'mapState', namespace)
                if (!module) {
                    return
                }
              	// 子模块 state、getter
                state = module.state
                getters = module.getters
            }
          	// 如：以下场景的配置项，需要执行函数，得到最终结果在返回
            // countPlusLocalState (state) {
            //  return state.count + this.localCount
            //}
            return typeof val === 'function'
                ? val.call(this, state, getters)
                : state[val]
        }
    })
    return res
})

同理可依次实现 mapGetters、mapMutations、mapActions 辅助函数

mapGetters

export const mapGetters = normalizeNamespace((namespace, getters) => {
    const res = {}

    normalizeMap(getters).forEach(({ key, val }) => {
        // The namespace has been mutated by normalizeNamespace
        val = namespace + val
        res[key] = function mappedGetter() {
            if (namespace && !getModuleByNamespace(this.$store, 'mapGetters', namespace)) {
                return
            }
            return this.$store.getters[val]
        }
    })
    return res
})

mapMutations

export const mapMutations = normalizeNamespace((namespace, mutations) => {
    const res = {}

    normalizeMap(mutations).forEach(({ key, val }) => {
        res[key] = function mappedMutation(...args) {
            // Get the commit method from store
            let commit = this.$store.commit
            if (namespace) {
                const module = getModuleByNamespace(this.$store, 'mapMutations', namespace)
                if (!module) {
                    return
                }
                const _type = namespace + val
                commit = () => { this.$store.commit(_type) }
            }
            return typeof val === 'function'
                ? val.apply(this, [commit].concat(args))
                : commit.apply(this.$store, [val].concat(args))
        }
    })
    return res
})

mapActions

export const mapActions = normalizeNamespace((namespace, actions) => {
    const res = {}

    normalizeMap(actions).forEach(({ key, val }) => {
        res[key] = function mappedAction(...args) {
            // get dispatch function from store
            let dispatch = this.$store.dispatch
            if (namespace) {
                const module = getModuleByNamespace(this.$store, 'mapActions', namespace)
                if (!module) {
                    return
                }
                const _type = namespace + val
                dispatch = () => { return this.$store.dispatch(_type) }

            }
            return typeof val === 'function'
                ? val.apply(this, [dispatch].concat(args))
                : dispatch.apply(this.$store, [val].concat(args))
        }
    })
    return res
})

至此，手写 Vuex 基础功能、模块化、命名空间、严格模式等已完结，以源码为例，实现了一个简易的Vuex3，帮助我们理解其原理，希望这篇文章对你有所帮助！更多详细信息请参考 vuex 源码。

完整代码

系列文章

• 【造轮子系列】面试官问：你能手写Vuex吗(一)
• 【造轮子系列】面试官问：你能手写Vuex吗(二)

我的更多前端资讯

欢迎大家技术交流 资料分享 摸鱼 求助皆可 —链接