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

1. 前言

Vuex版本：3.4.0

Vuex仓库：https://github.com/vuejs/vuex

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集合：

代码：

// src/store.js

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开发之路系列文章

菜单加载中...