Vuex源码分析四 ———— mapGetters

上一篇分析了获取Vuex中的state的Api————mapState，这一篇继续分析获取getters的Api————mapGetters，它其实与mapState类似，下面看一下源码。

mapGetters

mapGetters的方法相较于mapState简单一些，因为调用了normalizeMap方法，所以也可以传入数组或对象，而下面定义的方法内部，最终应用this.$store.getters来获取最终需要的getter。

const mapGetters = normalizeNamespace((namespace, getters) => {
    const res = {}
    normalizeMap(getters).forEach(({ key, val }) => {
        val = namespace + val
        res[key] = function mappedGetter () {
            if (namespace && !getModuleByNamespace(this.$store, 'mapGetters', namespace)) {
                return
            }
            if (process.env.NODE_ENV !== 'production' && !(val in this.$store.getters)) {
                console.error(`[vuex] unknown getter: ${val}`)
                return
            }
            return this.$store.getters[val]
        }
        // mark vuex getter for devtools
        res[key].vuex = true
    })
    return res
})

mapGetters在Vue组件中的应用

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

<script>
    import { mapGetters } from 'vuex'

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

它的使用方式与mapState类似，这里就不做详细的分析了。

总结

mapGetters的内部原理其实同样调用了this.$store.getters来获取最终需要的getter。平时开发中，还是主要应用mapGetters来获取状态，因为有些时候，需要合并多个state才能得到想要的数据，可能暂时用不到，但随着业务的增加，不可避免会用到，所以还是统一使用mapGetters更加方便。

赏

谢谢你请我吃糖果