Vuex源码阅读(一) new Vuex.Store()内部探究

1. 前言

Vuex版本：3.4.0

Vux文档：https://vuex.vuejs.org/zh/guide/

文章时间：2020-06-09

2. 执行顺序

首先看个简单的代码块：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 
let baseStore = new Vuex.Store({
    state: {
        count: 0
    },
});
export default baseStore;
 
// app.js
import Vue from 'vue'
import store from './store'
 
new Vue({
    el: '#app',
    store
})

2.1 第一步：Vue.use(Vuex)

说明：这一步是Vuex在Vue的beforeCreate事件内增加一个回调函数，其目的是为把初始化后的store对象挂载到this.$store，即Vue.$store。

代码：

Vue.mixin({ beforeCreate: vuexInit });
 
function vuexInit() {
    const options = this.$options;
    // store injection store注入
    if (options.store) {
        this.$store = typeof options.store === 'function' ? options.store() : options.store;
    } else if (options.parent && options.parent.$store) {
        this.$store = options.parent.$store;
    }
}

2.2 第二步：new Vuex.Store({})

说明：初始化具体的store对象。

2.3 第三步：new Vue({ store })

说明：这里主要是为了执行第一步的代码，因为第一步的Vue.use(Vuex)只是注入一个回调，内部的条件判断options.store 和 options.parent && options.parent.$store都没有生效，只有在这一步时才会生效，其目的就向上面说的把初始化后的store对象挂载到this.$store，这样所有子组件就可以通过this.$store调用store对象。

代码：

new Vue({
    el: '#app',
    router,
    components: { App },
    store: {
        baseStore: baseStore
    },
    template: '<App/>'
});

3. 探究new Vuex.Store({})

说明：这里将着重介绍new Vuex.Store({})都干了什么。

注意：此处的讲解都是以使用单一状态树为前提条件，没有Module以及Module内的namespaced等知识点，modules这块会单独讲解。

3.1 重新绑定dispatch、commit

说明：此处重新绑定dispatch、commit方法，把store自身插入到第一个参数前面。

这也是为什么我们在外部调用this.$store.dispatch('actionName')时，所创建的action第一个参数为store本身。

代码：

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)
}

3.2 转换为Module对象

说明：在这里Vuex将传入的Vuex代码解析为Model对象(后面将以options表示传入的代码块)：

new Vuex.Store({
    state: {
        count: 0
    },
    getters,
    actions,
    mutations
});

在Vuex源码中，会将options转换为Module集合：

代码：

1	`// src/store.js<br><br>this._modules = new ModuleCollection(options)`

其this._modules，即Model对象初始化后的字段含义为：

root: { // Module对象
    state:{
　　　　count: 0
　　} // 传入Vuex({options})内的state
    _children: {} // 内部嵌套Module
    _rawModule: options // 传入的options对象
}

3.3 installModule

说明：在这里将对Module进行封装处理。

处理步骤：

1) 若module.namespaced = true ：此Module将被加入store._modulesNamespaceMap内，其key为Module嵌套的路径。

if (module.namespaced) {
    store._modulesNamespaceMap[namespace] = module
}

2) 非root Module时：子Module.state注入到父节点的state对象里。

if (!isRoot && !hot) {
    const parentState = getNestedState(rootState, path.slice(0, -1)) // path.slice(0, -1) 表示只返回前面的父节点
    const moduleName = path[path.length - 1]
    store._withCommit(() => {
        Vue.set(parentState, moduleName, module.state)
    })
}

3) 对store进行局部化，这里主要对module.namespaced= true 的module进行另外处理，其内部的成员都需要进行namespace路径处理处理。

官方说明：默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

4) 对module的mutation进行封装：

　　①添加到store._mutations数组内，_mutations的key默认为mutation的名称，如果module.namespaced = true，那么key就为namespace+mutation的名称。可多个module注册同名。

　　②将module.mutation第二个参数修改为局部化的state。

const entry = store._mutations[type] || (store._mutations[type] = []);
entry.push(function wrappedMutationHandler(payload) {
    handler.call(store, local.state, payload);
});

5) 对module的action进行封装：

　　①添加到store._actions数组内，_actions的key默认为action的名称，如果module.namespaced = true，那么key就为namespace+action的名称。可多个module注册同名。

　　②将module.action第二个参数修改为局部化和root的state。

onst entry = store._actions[type] || (store._actions[type] = []);
entry.push(function wrappedActionHandler(payload) {
    let res = handler.call(
        store,
        {
            dispatch: local.dispatch,
            commit: local.commit,
            getters: local.getters,
            state: local.state,
            rootGetters: store.getters,
            rootState: store.state
        },
        payload
    );
    if (!isPromise(res)) {
        res = Promise.resolve(res);
    }
    if (store._devtoolHook) {
        return res.catch((err) => {
            store._devtoolHook.emit('vuex:error', err);
            throw err;
        });
    } else {
        return res;
    }
});

6) 对module的getter进行封装：

　　①添加到store._wrappedGetters数组内，_wrappedGetters的key默认为action的名称，如果module.namespaced = true，那么key就为namespace+action的名称。只能单一注册。

　　②module.mutation第一个参数修改为局部化和root的state。

if (store._wrappedGetters[type]) {
    if (__DEV__) {
        console.error(`[vuex] duplicate getter key: ${type}`);
    }
    return;
}
store._wrappedGetters[type] = function wrappedGetter(store) {
    return rawGetter(
        local.state, // local state
        local.getters, // local getters
        store.state, // root state
        store.getters // root getters
    );
};

7) 若当前module含有子module时，遍历当前model的_children属性，迭代执行installModule。

3.4 resetStoreVM

说明：初始化storevm，并负责将getter注册为计算属性，并保存缓存特性。

处理步骤：

1) 遍历wrappedGetters，封装到store.getters里。

forEachValue(wrappedGetters, (fn, key) => {
    // 使用computed来利用其延迟缓存机制
    // 直接内联函数的使用将导致保留oldVm的闭包。
    // 使用partial返回只保留闭包环境中的参数的函数。
    // use computed to leverage its lazy-caching mechanism
    // direct inline function use will lead to closure preserving oldVm.
    // using partial to return function with only arguments preserved in closure environment.
    computed[key] = partial(fn, store)
    Object.defineProperty(store.getters, key, {
      get: () => store._vm[key],
      enumerable: true // for local getters
    })
})

2) 初始化store._vm，传入data和computed。

说明：这里主要把state与getter(computed)进行绑定，state有更改时，getter(computed)进行自动更新，采用的方式就是本地创建一个Vue对象。

store._vm = new Vue({
    data: {
        $$state: state
    },
    computed
})

3.5 注册插件

4. commit()执行了什么

当在action内调用了commit方法时，其内部步骤如下：

1) 从store._mutations[]数组内读取对应的mutation名称的数组。

2) 从获取到的_mutations[]数组遍历执行对应的mutation处理程序。

3) 触发store._subscribers对应的回调。

5. dispatch()执行了什么

在通过this.$store.dispatch()调用对应的action时，其内部步骤如下：

1) 与commit()调用的方法类似，从store._actions[]数组内获取对应的acticon数组。

2) 执行active对应的处理程序并以Promise返回。

End

Web开发之路系列文章

posted on 2020-06-09 00:56 FangMu 阅读(4756) 评论(0) 编辑收藏举报

搜索

随笔分类 (118)

阅读排行榜

评论排行榜

推荐排行榜

最新评论