Vuex源码分析三 ———— mapState

2019-01-14

之前的两篇文章介绍了Vuex的内部过程以及实现原理，其暴露出来的方法基本上能满足日常的开发使用，但是如果都按着this.$store的这种写法，会很复杂。而Vuex也提供了很多简便操作的Api，下面的这几篇文章就分别分析一下每个Api的源码，并结合实例说明一下。

这篇先介绍第一个Api————mapState，它主要是为了方便我们操作state而应用的。在分析源码之前，先要看几个公共方法，了解它们对分析这几个Api很重要（之后的几个Api都会用到这几个方法，如果忘了可以回头来看看）。

normalizeNamespace

normalizeNamespace函数其实是个高阶函数，它以函数fn作为参数，然后返回一个函数，然后对返回的这个函数进行参数校验，如果第一个参数不是string类型，则将其设置为第二个参数map的值，本身成为空的字符串。如果是string类型，则进行一下拼接处理之后再使用。

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)
    }
}

normalizeMap

normalizeMap方法对传入的参数进行校验，如果是数组，则遍历这个数组，并将其每个元素处理为对象的形式；如果为Object，也会遍历，并组合成一个对象数组进行返回。

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

getModuleByNamespace

getModuleByNamespace方法主要就是对命名空间进行一下校验，可以暂时不用太过考虑这个方法

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

上面这几个方法都是辅助函数，在Api中都会用到，不明白的时候可以翻上去看一下。

mapState

还记得上面的normalizeNamespace方法吗，它的参数是一个函数，也就是下面定义的这个函数，而平时我们在使用mapState的时候，传入的参数正是传入到normalizeNamespace返回的方法中。如果不考虑命名空间的话，normalizeNamespace返回的方法最终将处理完的参数传入到下面定义的这个函数中。

/*
    所以，下面的namespace和states分别为空字符串和我们传入的参数
*/
const mapState = normalizeNamespace((namespace, states) => {
    const res = {}
    /*
        这里调用了一下normalizeMap方法，经过上面分析
        它会对参数进行判断，然后转换成对象数组
        接下来进行遍历，然后再判断参数是否为函数
        并进行最终的返回
    */
    normalizeMap(states).forEach(({ key, val }) => {
        res[key] = function mappedState () {
        let state = this.$store.state
        let getters = this.$store.getters
        if (namespace) {
            const module = getModuleByNamespace(this.$store, 'mapState', namespace)
            if (!module) {
                return
            }
            state = module.context.state
            getters = module.context.getters
        }
        return typeof val === 'function'
            ? val.call(this, state, getters)
            : state[val]
        }
        res[key].vuex = true
    })
    // mark vuex getter for devtools
    return res
})

根据上面的分析，在调用mapState时，可以传入数组或者是对象，因为内部会做处理，最终根据不同类型来导出不同的结果。而最终还是应用this.$store去获取对应的值。

mapState在Vue组件中的应用

还是使用上一篇定义的Vuex

<template>
    <div>
        <div>{{ num }}</div>
    </div>
</template>

<script>
    import { mapState } from 'vuex'

    export default {
        computed: {
            ...mapState(['num'])
        },
        mounted(){
            console.log(this.num)
        }
    }
</script>

经过上面源码的分析可知，这里传入的参数是个数组，所以经过normalizeMap转换后得到的对象是[{key: 'num', val: 'num'}]，遍历后进行判断，因为val不是function，所以直接调用this.$store.state.num，最终返回的是一个对象{num: 1}。上面的computed中应用了...结构，最终会把num放入到computed中。

在应用mapState的时候，也可以传入对象，即mapState({num: 'num'})，如果想给参数换个名字可以是mapState({ber: 'num'})，这样调用this.ber就可以获取到num的值。

总结

mapState方法主要为了方便我们在开发的时候进行操作，不用每次获取变量都要写this.$store.state，它可以接收数组或者对象作为参数，但观察其内部，依然是通过this.$store.state来操作，毕竟不能脱离定义的Store。