Vuex源码分析一 ———— 初始化Store

前面的文章分析了Redux的源码和Api，作为前端三大框架的Vue当然也少不了状态管理工具——Vuex，下面的几篇文章就来对Vuex及其常用Api进行一下源码分析

Store

在平时开发使用vuex的时候，都会实例化一个Store，即new Vuex.Store，里面传入state、getters、actions，mutations等相关属性，正是在这个过程中，vuex会初始化Store，下面就来看一下Store这个类的源码（部分代码已删减，只保留核心功能），遇到调用的某个方法，请到下面查看对应的源码分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
class Store {
    constructor (options = {}) {
        /*
            这里的options就是传入的state、action等对象参数
            首先从中获取state，其可以为普通对象，也可以为一个函数
            如果是函数，则执行这个函数
        */
        let {
            state = {}
        } = options
        if (typeof state === 'function') {
            state = state() || {}
        }

        /*
            初始化一些属性，之所以用Object.create(null)不用{}
            是为了防止对象获取原型上的属性
        */
        this._committing = false    //是否是正在commit状态
        this._actions = Object.create(null)
        this._mutations = Object.create(null)
        this._wrappedGetters = Object.create(null)
        /*
            ModuleCollection函数是来收集参数中的modules，也就是
            getters、actions、mutations等属性，具体可以看下面源码分析
        */
        this._modules = new ModuleCollection(options)

        /*
            这一步的操作是改写dispatch、commit函数，开发时用到的方法
            正是在这里转换后的方法
        */
        const store = this
        const { dispatch, commit } = this
        this.dispatch = function boundDispatch (type, payload) {
            return dispatch.call(store, type, payload)
        }
        this.commit = function boundCommit (type, payload, options) {
            return commit.call(store, type, payload, options)
        }

        /*
            这里来加载上面获取到属性，可以查看下面installModule方法源码
        */
        installModule(this, state, [], this._modules.root)

        /*
            这里重新设置store
        */
        resetStoreVM(this, state)
    }

    /*
        get方法用来获取定义的state，也就是在开发时用到的
        this.$store.state...就是执行的这个方法
    */
    get state () {
        return this._vm._data.$$state
    }

    /*
        commit方法就是action要通知mutation时调用的方法
        其中unifyObjectStyle就是将type、payload、options
        等属性扁平化，使其成为一个plainObject
        最后在mutations中找到对应type的mutation，并将payload
        传入执行这个mutation
    */
    commit (_type, _payload, _options) {
        const {
            type,
            payload,
            options
        } = unifyObjectStyle(_type, _payload, _options)

        const mutation = { type, payload }
        const entry = this._mutations[type]

        this._withCommit(() => {
            entry.forEach(function commitIterator (handler) {
                handler(payload)
            })
        })
    }

    /*
        dispatch是在派发一个action时执行的方法
        其原理跟commit方法基本类似，但是有个注意点，dispatch
        派发的可以不是一个action，可以是个数组，如果是数组
        则会遍历每一项，然后分别处理
    */
    dispatch (_type, _payload) {
        const {
            type,
            payload
        } = unifyObjectStyle(_type, _payload)

        const action = { type, payload }
        const entry = this._actions[type]

        return entry.length > 1
            ? Promise.all(entry.map(handler => handler(payload)))
            : entry[0](payload)
    }

    /*
        withCommit方法其实就是为了设置commit状态，起到一个开关作用
    */
    _withCommit (fn) {
        const committing = this._committing
        this._committing = true
        fn()
        this._committing = committing
    }
}

Store类还是很简单的，其内部主要是做一些初始化的操作。下面来看看主要的函数源码：

ModuleCollection

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
    ModuleCollection类主要用来收集传入的属性
    在构造函数中调用register方法，根据上面的源码
    其中的rawRootModule就是options也就是传入的参数
*/
class ModuleCollection {
    constructor (rawRootModule) {
        this.register([], rawRootModule, false)
    }

    get (path) {
        return path.reduce((module, key) => {
            return module.getChild(key)
        }, this.root)
    }

    getNamespace (path) {
        let module = this.root
        return path.reduce((namespace, key) => {
            module = module.getChild(key)
            return namespace + (module.namespaced ? key + '/' : '')
        }, '')
    }

    update (rawRootModule) {
        update([], this.root, rawRootModule)
    }

    /*
        register方法里实例化一个Module并将options传入
        同时设置一个属性，名为root执行实例化后的实例
    */
    register (path, rawModule, runtime = true) {
        const newModule = new Module(rawModule, runtime)
        this.root = newModule
    }
}

Module

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/*
    Module类主要用来获取到options找那个的每个属性，并做处理
*/
class Module {
    constructor (rawModule, runtime) {
        this.runtime = runtime
        this._children = Object.create(null)
        this._rawModule = rawModule
        const rawState = rawModule.state
        this.state = (typeof rawState === 'function' ? rawState() : rawState) || {}
    }

    get namespaced () {
        return !!this._rawModule.namespaced
    }

    addChild (key, module) {
        this._children[key] = module
    }

    removeChild (key) {
        delete this._children[key]
    }

    getChild (key) {
        return this._children[key]
    }

    update (rawModule) {
        this._rawModule.namespaced = rawModule.namespaced
        if (rawModule.actions) {
            this._rawModule.actions = rawModule.actions
        }
        if (rawModule.mutations) {
            this._rawModule.mutations = rawModule.mutations
        }
        if (rawModule.getters) {
            this._rawModule.getters = rawModule.getters
        }
    }

    forEachChild (fn) {
        forEachValue(this._children, fn)
    }

    forEachGetter (fn) {
        if (this._rawModule.getters) {
            forEachValue(this._rawModule.getters, fn)
        }
    }

    forEachAction (fn) {
        if (this._rawModule.actions) {
            forEachValue(this._rawModule.actions, fn)
        }
    }

    forEachMutation (fn) {
        if (this._rawModule.mutations) {
            forEachValue(this._rawModule.mutations, fn)
        }
    }
}

forEachValue

1
2
3
4
5
6
7
/*
    forEachValue方法主要用来遍历对象，然后将对象的value、key作为参数
    传入到函数参数中
*/
function forEachValue (obj, fn) {
    Object.keys(obj).forEach(key => fn(obj[key], key))
}

installModule

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/*
    installModule方法主要用来安装传入的属性
    根据上面源码调用该方法的地方，传入的参数为
    installModule(this, state, [], this._modules.root)
    这里的this._modules.root正是在ModuleCollection中register方法中
    定义的，其值为Module实例
*/
function installModule (store, rootState, path, module, hot) {

    /*
        这里先调用makeLocalContext方法获取到local值，主要是根据命名空间来获取
        除非较大的项目，平时较少用到命名空间，所以可以将local值看成就是store
        这里的namespace可以视为空字符串
    */
    const local = module.context = makeLocalContext(store, namespace, path)

    /*
        然后分别注册mutation、action、getter
        而forEachMutation、forEachAction、forEachGetter方法正是在module实例中
        定义的方法，而根据上面的分析，这里调用的registerMutation、registerAction、
        forEachGetter三个方法中传入的mutation、action、getter参数，正是在开发中
        定义的三个属性中对应的方法，也就是实际写的getters、actions、mutations中的
        每个方法
    */
    module.forEachMutation((mutation, key) => {
        const namespacedType = namespace + key
        registerMutation(store, namespacedType, mutation, local)
    })

    module.forEachAction((action, key) => {
        const type = action.root ? key : namespace + key
        const handler = action.handler || action
        registerAction(store, type, handler, local)
    })

    module.forEachGetter((getter, key) => {
        const namespacedType = namespace + key
        registerGetter(store, namespacedType, getter, local)
    })
}

makeLocalContext

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/*
    makeLocalContext方法对store中的命名空间做了一层处理，如果设置了命名空间
    则会进一步向下获取，平时较少用到命名空间，所以可以把这步操作看成就是原始的store
*/
function makeLocalContext (store, namespace, path) {
    const noNamespace = namespace === ''

    const local = {
        dispatch: noNamespace ? store.dispatch : (_type, _payload, _options) => {
            const args = unifyObjectStyle(_type, _payload, _options)
            const { payload, options } = args
            let { type } = args

            if (!options || !options.root) {
                type = namespace + type
                if (process.env.NODE_ENV !== 'production' && !store._actions[type]) {
                    console.error(`[vuex] unknown local action type: ${args.type}, global type: ${type}`)
                    return
                }
            }

            return store.dispatch(type, payload)
        },

        commit: noNamespace ? store.commit : (_type, _payload, _options) => {
            const args = unifyObjectStyle(_type, _payload, _options)
            const { payload, options } = args
            let { type } = args

            if (!options || !options.root) {
                type = namespace + type
                if (process.env.NODE_ENV !== 'production' && !store._mutations[type]) {
                    console.error(`[vuex] unknown local mutation type: ${args.type}, global type: ${type}`)
                    return
                }
            }

            store.commit(type, payload, options)
        }
    }

    Object.defineProperties(local, {
        getters: {
            get: noNamespace
                ? () => store.getters
                : () => makeLocalGetters(store, namespace)
        },
        state: {
            get: () => getNestedState(store.state, path)
        }
    })

    return local
}

registerMutation、registerAction、registerGetter

这三个方法是初始化的核心方法，是来处理我们自定义的三个队属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/*
    registerMutation方法会在初始化属性_mutations中定义一个对应type的mutations
    其初始为一个空数组，并把我们自定义的mutation转换成一个函数push到这个数组中
*/
function registerMutation (store, type, handler, local) {
    const entry = store._mutations[type] || (store._mutations[type] = [])
    entry.push(function wrappedMutationHandler (payload) {
        /*
            调用每个mutation传入了参数local.state、payload
            这样就是我们在写mutation时，可以在方法参数中获取到state，以及要传过来
            的数据
        */
        handler.call(store, local.state, payload)
    })
}

/*
    registerMutation方法会在初始化属性_actions中定义一个对应type的actions
    其初始为一个空数组，并把我们自定义的action转换成一个函数push到这个数组中
    这里做了一个isPromise校验，这样也就使得我们在定义异步操作时，要放在action中
*/
function registerAction (store, type, handler, local) {
    const entry = store._actions[type] || (store._actions[type] = [])
    entry.push(function wrappedActionHandler (payload, cb) {
        /*
            调用每个action时，传入了local.dispatch、local.commit、
            local.getters、local.state、store.getters、store.state，
            并重新进行命名这也就是我们在写action时，可以获取到对应的属性，
            如果没有定义命名空间，则local.getters和store.getters一样，
            local.state和store.state一样
        */
        let res = handler.call(store, {
            dispatch: local.dispatch,
            commit: local.commit,
            getters: local.getters,
            state: local.state,
            rootGetters: store.getters,
            rootState: store.state
        }, payload, cb)
        if (!isPromise(res)) {
            res = Promise.resolve(res)
        }
        return res
    })
}

/*
    registerGetter方法会根据对应的type找到getter，其值为一个方法，
    最后调用rawGetter方法，也就是我们自定义的getter
*/
function registerGetter (store, type, rawGetter, local) {
    store._wrappedGetters[type] = function wrappedGetter (store) {
        /*
            这里传入了local.state、local.getters、store.state、
            store.getters四个参数，如果没有定义命名空间，
            则local.getters和store.getters一样，
            local.state和store.state一样
            这里注意一下，上面是传入一个对象，而这里是作为单独参数
            分别传入
        */
        return rawGetter(
            local.state, // local state
            local.getters, // local getters
            store.state, // root state
            store.getters // root getters
        )
    }
}

resetStoreVM

resetStoreVM方法其实很简单，主要是将state、getters挂载到vue实例上，并且将旧的vm卸载，使用新的vm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function resetStoreVM (store, state, hot) {
    const oldVm = store._vm
    store.getters = {}
    const wrappedGetters = store._wrappedGetters
    const computed = {}
    forEachValue(wrappedGetters, (fn, key) => {
        computed[key] = () => fn(store)
        Object.defineProperty(store.getters, key, {
            get: () => store._vm[key],
            enumerable: true
        })
    })

    /*
        这一步的操作可以知道，我们在开发的过程中，即使没在
        computed中定义getter，也可以用this.$store.getter
        获取到自定义的getter
    */
    store._vm = new Vue({
        data: {
            $$state: state
        },
        computed
    })

    if (oldVm) {
        if (hot) {
            store._withCommit(() => {
                oldVm._data.$$state = null
            })
        }
        Vue.nextTick(() => oldVm.$destroy())
    }
}

总结

经过上面整体的源码分析，可以看出Vuex的内部逻辑并没有特别复杂，它会将我们自定义的state、getters、actions、mutations分别进行的处理，然后放入到Store中，而每次要做出相应的变化，都要调用dispatch、commit方法。

下一篇会结合具体实例来进一步分析一下。

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

前端小白一枚<br><br>乐于学习实践web<br>对主流知识有浓厚兴趣<br><br>欢迎大家来分享、评论