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返回。

 

posted on 2020-06-09 00:56  方木一  阅读(1366)  评论(0编辑  收藏