VUEX 3.x源码分析——8. 插件开发

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

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

本章讲解vuex中插件开发的相关内容。
想了解vuex中的其他源码分析，欢迎参考我发布的下列文章：
VUEX3 源码分析——1. 理解State
VUEX3 源码分析——2. 理解Getter
VUEX3 源码分析——3. 理解Mutations
VUEX3 源码分析——4. 理解Action
VUEX 3 源码分析——5. 理解Module
VUEX 3 源码分析——6. 理解命名空间namespace
VUEX 3 源码分析——7. 模块的动态注册和卸载

基本介绍

• store实例化时，接受一个plugins对象，其值为数组，数组的每个元素为函数，函数只接受store为唯一参数
• 实例化时，遍历这个数值并执行函数。这个函数就是开发的插件

// store.js
export default class Store{
    const {plugins = [], strict=false, devtools} = options
    ...
    plugins.forEach(plugin => plugin(this))
}

基于mutation的插件——subscribe

• store对外暴露一个subscribe方法，接收一个函数和选项。
• 这个函数内，将传入的函数（即插件）加入到_subscribers中，并返回一个监控函数。
• 在调用commit并将mutation都执行后，遍历执行_subscribers中的插件函数

// store.js
export default class Store{
    subscribe (fn, options) {
        return genericSubscribe(fn, this._subscribers, options)
    }
    commit(_type, _payload, _options) {
        ...
        const mutation = { type, payload }
        this._withCommit(...) // 执行mutations
        this._subscribers.slice().froEach(sub => sub(mutation, this.state))
        ...  
    }
}
// store-util.js
export function genericSubscribe(fn, subs, options) {
    if (subs.indexOf(fn) < 0) {
        options && options.prepend ? subs.unshift(fn) : subs.push(fn)    
    }
    return () => {
        const i = subs.indexOf(fn)
        if (i > -1) {
            subs.splice(i, 1)        
        }    
    }
}

基于action的插件——subscribeAction

• 基本和subscribe一致。
• 区别在于它用_actionSbuscribers属性收集，然后可以在action执行前，执行插件函数。

// store.js
export default class Store{
    subscribeAction (fn, options) {
        const subs = typeof fn === 'function' ? {before: fn} : fn
        return genericSubscribe(subs, this._actionSubscribers, options)
    }
    dispatch(_type, _payload) {
        try {
            this._actionSubscribers
                .slice()
                .filter(sub => sub.before)
                .forEach(sub => sub.before(action, this.state))        
        }
        const result = entry.length > 1
            ? Promise.all(entry.map(handler => handler(payload)))
            : entry[0](payload)
        return new Promise((resolve, reject) => {
            result.then(res => {
                try {
                    this._actionSubscribers
                        .filter(sub => sub.after)
                        .forEach(sub => sub.after(action, this.state))                
                }
                ...       
            })        
        })
    }
}