Vuex源码分析六 ———— mapMutations

2019-01-24

说完了actions的Api，当然少不了mutations的Api————mapMutations，下面来看看其源码

mapMutations

mapMutations与mapActions的原理很相似，只不过就是调用了this.$store.commit方法来修改state

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

mapMutations在Vue组件中的应用

<template>
    <div>
        <div>{{ num }}</div>
        <button @click="increment">+</button>
    </div>
</template>

<script>
    import { mapGetters, mapMutations } from 'vuex'

    export default {
        computed: {
            ...mapGetters(['num'])
        },
        methods: {
            ...mapMutations(['increment'])
        }
    }
</script>

写法基本一致，当然传入的参数也可以是对象，也可以做其它名称的映射。

总结

mapMutations没有特别想要说的，理解了mapActions也就明白了它的原理。

可以看出，这些方便操作的Api，其内部实现的原理还是要应用Store中定义的方法，只不过方便开发时的书写，来将其进一步封装。

整体总结

以上分了几个篇幅来讲解Vuex的源码，经过分析之后，理解其内部的思想，也可以看出它与Redux的区别。这样可以让我们在开发使用的时候，更加得心应手，以前只知道这样写，但是为什么却不得而知。而读过源码之后，即使在出现问题的时候，也可以很轻松的定位到问题所在。

学到的知识

1、class类的使用，深入理解面向对象编程的思想。

2、加深理解数组、对象、字符串等类型操作的各种Api。

3、高阶函数的灵活运用，Vuex将高阶函数应用到了极致，看源码可知，很多地方都应用了高阶函数，使得整体更加完善，逻辑更加清晰。

4、工具函数、方法的拆分。

5、理解工具、框架的核心思想。

6、还是那句话，基础最最重要，基础打好，更方便开发。