VUEX 3.x源码分析——3. 理解Mutations

这是对vuex3.x版本的源码分析。
本次分析会按以下方法进行：

1. 按官网的使用文档顺序，围绕着某一功能点进行分析。这样不仅能学习优秀的项目源码，更能加深对项目的某个功能是如何实现的理解。这个对自己的技能提升，甚至面试时的回答都非常有帮助。
2. 在围绕某个功能展开讲解时，所有不相干的内容都会暂时去掉，等后续涉及到对应的功能时再加上。这样最大的好处就是能循序渐进地学习，同时也不会被不相干的内容影响。省略的内容都会在代码中以…表示。
3. 每段代码的开头都会说明它所在的文件目录，方便定位和查阅。如果一个函数内容有多个函数引用，这些都会放在同一个代码块中进行分析，不同路径的内容会在其头部加上所在的文件目录。

本章只讲解vuex中的Mutations，这也是vuex官网中“核心概念”的第三个。
想了解vuex中的其他源码分析，欢迎参考我发布的下列文章：
VUEX 3 源码分析——1. 理解State
VUEX 3 源码分析——2. 理解Getter
VUEX 3 源码分析——3. 理解Mutations
VUEX3 源码分析——4. 理解Action
VUEX 3 源码分析——5. 理解Module
VUEX 3 源码分析——6. 理解命名空间namespace
VUEX 3 源码分析——7. 模块的动态注册和卸载

初始化

• 在 installModule 函数中，将每个定义的mutation按key-value遍历，存入store._mutations中.
• 注意这里的每个store._mutations[k]都是一个数组，数组中的元素是一个函数（wrappedMutationHandler，接收payload参数），此函数负责执行mutation。

// store-util.js
export function installModule(store, rootState, path, module, hot) {
   
    ...
    // forEachMutation方法和getter中的forEachGetter类似
    module.forEachMutation((mutation, key) => {
   
        const namespacedType = namespace + key
        registerMutation(store, namespacedType, mutation, local)    
    })
}

function registerMutation(store, type, handler, local) {
   
    const entry = store._mutations[type] || (store._mutations[type] = []) //短路求值
    entry.push(function wrappedMutationHandler(payload) {
   
        handler.call(store, local.state, payload)    
    })
}

commit的调用

• 在Store类上，定义了commit方法。
• 调用commit方法后，按传入的参数_type从store._mutations[type]中取出所有的执行函数
• 调用_withCommit方法依次执行mutation函数