逐行粒度的vuex源碼分析
vuex源碼分析
瞭解vuex
什麼是vuex
vuex是一個爲vue進行統一狀態管理的狀態管理器，主要分爲state, getters, mutations, actions幾個部分，
vue組件基於state進行渲染，當state發生變化時觸發組件的從新渲染，並利用了vue的響應式原理，衍生出getters,
getters以state做爲基礎，進行不一樣形式的數據的構造，當state發生改變時，響應式的進行改變。state的
改變只可以由commit進行觸發，每次的改變都會被devtools記錄。異步的操做經過actions觸發，好比後臺api請求發送等，
等異步操做完成時，獲取值並觸發mutations事件，進而實現stat從新求值，觸發視圖從新渲染。vue
爲何須要vuex
- 解決組件間的通訊和傳統事件模式過長的調用鏈難以調試的問題，在vue的使用中，咱們利用vue提供的事件模式實現父子間的通訊，或者利用eventBus的方式進行多組件
之間的通行，可是隨着項目變得龐大，調用鏈有時會變的很長，會沒法定位到事件的發起者，而且基於事件模式的調試是會讓開發者
頭疼不已，下一個接手項目的人很難知道一個事件的觸發會帶來哪些影響，vuex將狀態層和視圖層進行抽離，全部的狀態獲得統一的管理
全部的組件共享一個state，有了vuex咱們的關注從事件轉移到了數據，咱們能夠只關心哪些組件引用了狀態中的某個值，devtools實時反應
state的當前狀態，讓調試變得簡單。另外組件間的通訊，從訂閱同一個事件，轉移到了共享同一個數據，變得更加簡易。git
- 解決父子組件間數據傳遞問題，在vue的開發中咱們會經過props或者inject去實現父子組件的數據傳遞，可是當組件層級過深時
props的傳遞會帶來增長冗餘代碼的問題，中間一些不需特定數據的組件爲了進行數據傳遞會注入沒必要要的數據，而inject的數據傳遞原本就是有缺陷的
當代碼充斥着各類provided和inject時，雜亂的根本不知道組件inject的數據是在哪裏provide進來的。vuex將一些公用數據抽離並統一管理後，直接讓這種複雜的數據傳遞變得絕不費力。github
一 install
爲了實現經過Vue.use()方法引入vuex，須要爲vuex定義一個install方法。vuex中的intall方法主要做用是將store實例注入到每個vue組件中，具體實現方式以下vuex
export function install (_Vue) {
// 避免重複安裝
if (Vue && Vue === _Vue) {
// 開發環境報錯
console.warn("duplicate install");
}
Vue = _Vue;
// 開始註冊全局mixin
applyMixin(Vue);
}
以上代碼中經過定義一個全局變量Vue保存當前的引入的Vue來避免重複安裝，而後經過apllyMixin實現將store注入到各個實例中去api
export default function (Vue) {
// 獲取vue版本
const version = Number(Vue.version.split(".")[0]);
// 根據版本選擇註冊方式
if (version >= 2) {
// 版本大於2在mixin中執行初始化函數
Vue.mixin({ beforeCreate: vuexInit });
} else {
// 低版本，將初始化方法放在options.init中執行
const _init = Vue.prototype._init;
Vue.prototype._init = function (options = {}) {
options.init = options.init
? [vuexInit].concat(options.init)
: vuexInit;
_init();
};
}
// 初始化函數:將store做爲屬性注入到全部組件中
function vuexInit () {
// 根組件
if (this.$options && this.$options.store) {
this.$store = typeof this.$options.store === "function"
? this.$options.store()
: this.$options.store;
} else if (this.$options.parent && this.$options.parent.$store) { // 非根組件
this.$store = this.$options.parent.$store;
}
}
}
首先看這段代碼核心邏輯實現的關鍵函數vuexInit，該函數首先判斷this.$options選項（該選項在根實例實例化時傳入new Vue(options:Object)）數組
new Vue({
store
})
中是否包含store屬性，若是有，則將實例的this.$store屬性指向this.$options.store,若是沒有則指向this.$parent即父實例中的$store。
此時咱們在install執行後，經過在實例化根組件時把store傳入options就能將全部子組件的$store屬性都指向這個store了。
此外須要注意的時applyMixin執行時首先會判斷當前Vue的版本號，版本2以上經過mixin混入的方式在全部組件實例化的時候執行vueInit，而
版本2如下則經過options.init中插入執行的方式注入。如下時安裝函數的幾點總結promise
- 避免重複安裝
- 判斷版本，不一樣版本用不一樣方式注入初始方法，2以前經過options.init注入，2以後經過mixin注入
- 將store注入到全部vue的實例屬性$store中
2、如何實現一個簡單的commit
commit實際上就是一個比較簡單的發佈-訂閱模式的實現，不過這個過程當中會涉及module的實現，state與getters之間響應式的實現方式，併爲以後介紹actions能夠作一些鋪墊數據結構
使用
首先回顧下commit的使用app
// 實例化store
const store = new Vuex.Store({
state: { count: 1 },
mutations: {
add (state, number) {
state.count += number;
}
}
});
實例化store時，參數中的mutation就是事件隊列中的事件，每一個事件傳入兩個參數，分別時state和payload,每一個事件實現的都是根據payload改變state的值異步
<template>
<div>
count:{{state.count}}
<button @click="add">add</button>
</div>
</template>
<script>
export default {
name: "app",
created () {
console.log(this);
},
computed: {
state () {
return this.$store.state;
}
},
methods: {
add () {
this.$store.commit("add", 2);
}
}
};
</script>
<style scoped>
</style>
咱們在組件中經過commit觸發相應類型的mutation並傳入一個payload，此時state會實時發生變化
實現
首先來看爲了實現commit咱們在構造函數中須要作些什麼
export class Store {
constructor (options = {}) {
// 聲明屬性
this._mutations = Object.create(null);
this._modules = new ModuleCollection(options);
// 聲明發布函數
const store = this;
const { commit } = this;
this.commit = function (_type, _payload, _options) {
commit.call(store, _type, _payload, _options);
};
const state = this._modules.root.state;
// 安裝根模塊
this.installModule(this, state, [], this._modules.root);
// 註冊數據相應功能的實例
this.resetStoreVm(this, state);
}
首先是三個實例屬性_mutations是發佈訂閱模式中的事件隊列，_modules屬性用來封裝傳入的options:{state, getters, mutations, actions}
爲其提供一些基礎的操做方法，commit方法用來觸發事件隊列中相應的事件；而後咱們會在installModule
中註冊事件隊列，在resetStoreVm中實現一個響應式的state。
modules
在實例化store時咱們會傳入一個對象參數，這裏麪包含state,mutations,actions,getters,modules等數據項咱們須要對這些數據項進行封裝，並暴露一個這個些數據項的操做方法，這就是Module類的做用，另外在vuex中有模塊的劃分，須要對這些modules進行管理，由此衍生出了ModuleCollection類，本節先專一於commit的實現對於模塊劃分會放在後面討論，對於直接傳入的state，mutations，actions，getters，在vuex中會先經過Module類進行包裝，而後註冊在ModuleCollection的root屬性中
export default class Module {
constructor (rawModule, runtime) {
const rawState = rawModule.state;
this.runtime = runtime;// 1.todo:runtime的做用是啥
this._rawModule = rawModule;
this.state = typeof rawState === "function" ? rawState() : rawState;
}
// 遍歷mumation,執行函數
forEachMutation (fn) {
if (this._rawModule.mutations) {
forEachValue(this._rawModule.mutations, fn);
}
}
}
export function forEachValue (obj, fn) {
Object.keys(obj).forEach((key) => fn(obj[key], key));
}
構造函數中傳入的參數rawModule就是{state，mutations，actions，getters}對象,在Module類中定義兩個屬性_rawModule用於存放傳入的rawModule,forEachMutation實現mutations的遍歷執行，將mutation對象的value,key傳入fn並執行，接下去將這個module掛在modulecollection的root屬性上
export default class ModuleCollection {
constructor (rawRootModule) {
// 註冊根module，入參：path,module,runtime
this.register([], rawRootModule, false);
}
// 1.todo runtime的做用？
register (path, rawRootModule, runtime) {
const module = new Module(rawRootModule, runtime);
this.root = module;
}
}
通過這樣一系列的封裝，this._modules屬性就是下面這樣的數據結構
state
因爲mutations中保存的全部事件都是爲了按必定規則改變state，因此咱們要先介紹下store是如何進行state的管理的
尤爲是如何經過state的改變響應式的改變getters中的值，在構造函數中提到過一個方法resetStoreVm，在這個函數中
會實現state和getters的響應式關係
resetStoreVm (store, state) {
const oldVm = store._vm;
// 註冊
store._vm = new Vue({
data: {
$$state: state
}
});
// 註銷舊實例
if (oldVm) {
Vue.nextTick(() => {
oldVm.destroy();
});
}
}
這個函數傳入兩個參數，分別爲實例自己和state，首先註冊一個vue實例保存在store實例屬性_vm上，其中data數據項中定義了$$state屬性指向state，後面會介紹將getters分解並放在computed數據項中這樣很好的利用Vue原有的數據響應系統實現響應式的state，而且賦新值以後會把老的實例註銷。
對於state的包裝實際還差一步，咱們日常訪問state的時候是直接經過store.state訪問的，若是不作處理如今咱們只能經過store._vm.data.$$state來訪問，實際vuex經過class的get，set屬性實現state的訪問和更新的
export class Store {
get state () {
return this._vm._data.$$state;
}
set state (v) {
if (process.env.NODE_ENV !== "production") {
console.error("user store.replaceState()");
}
}
}
值得注意的是，咱們不能直接對state進行賦值，而要經過store.replaceState賦值，不然將會報錯
事件註冊
接下去終於要步入commit原理的核心了，發佈-訂閱模式包含兩個步驟，事件訂閱和事件發佈，首先來談談vuex是如何實現訂閱過程的
export class Store {
constructor (options = {}) {
// 聲明屬性
this._mutations = Object.create(null);// 爲何不直接賦值null
this._modules = new ModuleCollection(options);
const state = this._modules.root.state;
// 安裝根模塊
this.installModule(this, state, [], this._modules.root);
}
installModule (store, state, path, module) {
// 註冊mutation事件隊列
const local = this.makeLocalContext(store, path);
module.forEachMutation((mutation, key) => {
this.registerMutation(store, key, mutation, local);
});
}
// 註冊mutation
registerMutation (store, type, handler, local) {
const entry = this._mutations[type] || (this._mutations[type] = []);
entry.push(function WrappedMutationHandler (payload) {
handler.call(store, local.state, payload);
});
}
}
咱們只截取相關的部分代碼，其中兩個關鍵的方法installModule和registerMutation，咱們在此處會省略一些關於模塊封裝的部分，此處的local能夠簡單的理解爲一個{state，getters}對象，事件註冊的大體過程就是遍歷mutation並將mutation進行包裝後push進指定類型的事件隊列，首先經過Moulde類的實例方法forEachMutation對mutation進行遍歷，並執行registerMutation進行事件的註冊，在registerMutation中生成一個this._mutations指定類型的事件隊列，註冊事件後的this._mutations的數據結構以下
事件發佈
根據事件註冊後this._mutations的結構，咱們能夠很輕鬆的實現事件發佈，找到指定類型的事件隊列，遍歷這個隊列，傳入參數並執行。
// 觸發對應type的mutation
commit (_type, _payload, _options) {
// 獲取參數
const {
type,
payload
} = unifyObjectStyle(_type, _payload, _options);
const entry = this._mutations[type];
// 遍歷觸發事件隊列
entry.forEach(function commitIterator (handler) {
handler(payload);
});
}
可是須要注意的是，首先須要對參數進行下處理，就是unifyObjectStyle乾的事情
// 入參規則：type能夠是帶type屬性的對象，也能夠是字符串
function unifyObjectStyle (type, payload, options) {
if (isObject(type)) {
payload = type;
options = payload;
type = type.type;
}
return { type, payload, options };
}
其實實現了type能夠爲字符串，也能夠爲對象，當爲對象是，內部使用的type就是type.type，而第二個
參數就變成了type，第三個參數變成了payload。
到此關於commit的原理已經介紹完畢，全部的代碼見分支 https://github.com/miracle931...
3、action和dispatch原理
用法
定義一個action
add ({ commit }, number) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const pow = 2;
commit("add", Math.pow(number, pow));
resolve(number);
}, 1000);
});
}
觸發action
this.$store.dispatch("add", 4).then((data) => {
console.log(data);
});
爲何須要action
有時咱們須要觸發一個異步執行的事件，好比接口請求等，可是若是依賴mutatoin這種同步執行的事件隊列，咱們沒法
獲取執行的最終狀態。此時咱們須要找到一種解決方案實現如下兩個目標
- 一個異步執行的隊列
- 捕獲異步執行的最終狀態
經過這兩個目標，咱們能夠大體推算該如何實現了，只要保證定義的全部事件都返回一個promise，再將這些promise
放在一個隊列中，經過promise.all去執行，返會一個最終狀態的promise，這樣既能保證事件之間的執行順序，也能
捕獲最終的執行狀態。
action和dispatch的實現
註冊
首先咱們定義一個實例屬性_actions,用於存放事件隊列
constructor (options = {}) {
// ...
this._actions = Object.create(null);
// ...
}
接着在module類中定義一個實例方法forEachActions,用於遍歷執行actions
export default class Module {
// ...
forEachAction (fn) {
if (this._rawModule.actions) {
forEachValue(this._rawModule.actions, fn);
}
}
// ...
}
而後在installModule時期去遍歷actions,註冊事件隊列
installModule (store, state, path, module) {
// ...
module.forEachAction((action, key) => {
this.registerAction(store, key, action, local);
});
// ...
}
註冊
registerAction (store, type, handler, local) {
const entry = this._actions[type] || (this._actions[type] = []);
entry.push(function WrappedActionHandler (payload, cb) {
let res = handler.call(store, {
dispatch: local.dispatch,
commit: local.commit,
state: local.state,
rootState: store.state
}, payload, cb);
// 默認action中返回promise，若是不是則將返回值包裝在promise中
if (!isPromise(res)) {
res = Promise.resolve(res);
}
return res;
});
}
註冊方法中包含四個參數，store表明store實例，type表明action類型，handler是action函數。首先判斷是否已存在該類型acion的事件隊列，若是不存在則須要初始化爲數組。而後將該事件推入指定類型的事件隊列。須要注意的兩點，第一，action函數訪問到的第一個參數爲一個context對象，第二，事件返回的值始終是一個promise。
發佈
dispatch (_type, _payload) {
const {
type,
payload
} = unifyObjectStyle(_type, _payload);
// ??todo 爲何是一個事件隊列，什麼時候會出現一個key對應多個action
const entry = this._actions[type];
// 返回promise,dispatch().then()接收的值爲數組或者某個值
return entry.length > 1
? Promise.all(entry.map((handler) => handler(payload)))
: entry[0](payload);
}
首先獲取相應類型的事件隊列，而後傳入參數執行，返回一個promise，當事件隊列中包含的事件個數大於1時
將返回的promise保存在一個數組中，而後經過Pomise.all觸發，當事件隊列中的事件只有一個時直接返回promise
這樣咱們就能夠經過dispatch(type, payload).then(data=>{})獲得異步執行的結果，此外事件隊列中的事件
觸發經過promise.all實現，兩個目標都已經達成。
getters原理
getters的用法
在store實例化時咱們定義以下幾個選項：
const store = new Vuex.Store({
state: { count: 1 },
getters: {
square (state, getters) {
return Math.pow(state.count, 2);
}
},
mutations: {
add (state, number) {
state.count += number;
}
}
});
首先咱們在store中定義一個state，getters和mutations，其中state中包含一個count，初始值爲1，getters中定義一個square，該值返回爲count的平方，在mutations中定義一個add事件，當觸發add時count會增長number。
接着咱們在頁面中使用這個store：
<template>
<div>
<div>count:{{state.count}}</div>
<div>getterCount:{{getters.square}}</div>
<button @click="add">add</button>
</div>
</template>
<script>
export default {
name: "app",
created () {
console.log(this);
},
computed: {
state () {
return this.$store.state;
},
getters () {
return this.$store.getters;
}
},
methods: {
add () {
this.$store.commit("add", 2);
}
}
};
</script>
<style scoped>
</style>
執行的結果是，咱們每次觸發add事件時，state.count會相應增2,而getter始終時state.count的平方。這不禁得讓咱們想起了vue中的響應式系統，data和computed之間的關係，貌似一模一樣，實際上vuex就是利用vue中的響應式系統實現的。
getters的實現
首先定義一個實例屬性_wappedGetters用來存放getters
export class Store {
constructor (options = {}) {
// ...
this._wrappedGetters = Object.create(null);
// ...
}
}
在modules中定義一個遍歷執行getters的實例方法，並在installModule方法中註冊getters，並將getters存放至_wrappedGetters屬性中
installModule (store, state, path, module) {
// ...
module.forEachGetters((getter, key) => {
this.registerGetter(store, key, getter, local);
});
// ...
}
registerGetter (store, type, rawGetters, local) {
// 處理getter重名
if (this._wrappedGetters[type]) {
console.error("duplicate getter");
}
// 設置_wrappedGetters，用於
this._wrappedGetters[type] = function wrappedGetterHandlers (store) {
return rawGetters(
local.state,
local.getters,
store.state,
store.getters
);
};
}
須要注意的是，vuex中不能定義兩個相同類型的getter，在註冊時，咱們將一個返回選項getters執行結果的函數，傳入的參數爲store實例，選項中的getters接受四個參數分別爲做用域下和store實例中的state和getters關於local的問題在以後module原理的時候再作介紹，在這次的實現中local和store中的參數都是一致的。
以後咱們須要將全部的getters在resetStoreVm時期注入computed，而且在訪問getters中的某個屬性時將其代理到store.vm中的相應屬性
// 註冊響應式實例
resetStoreVm (store, state) {
// 將store.getters[key]指向store._vm[key],computed賦值
forEachValue(wrappedGetters, function (fn, key) {
computed[key] = () => fn(store);
});
// 註冊
store._vm = new Vue({
data: {
$$state: state
},
computed
});
// 註銷舊實例
if (oldVm) {
Vue.nextTick(() => {
oldVm.destroy();
});
}
}
在resetStroreVm時期，遍歷wrappedGetters，並將getters包裝在一個具備相同key的computed中再將這個computed注入到store._vm實例中。
resetStoreVm (store, state) {
store.getters = {};
forEachValue(wrappedGetters, function (fn, key) {
// ...
Object.defineProperty(store.getters, key, {
get: () => store._vm[key],
enumerable: true
});
});
// ...
}
而後將store.getters中的屬性指向store._vm中對應的屬性，也就是store.computed中對應的屬性這樣，當store._vm中data.$$state(store.state)發生變化時，引用state的getter也會實時計算以上就是getters可以響應式變化的原理
具體代碼見 https://github.com/miracle931...
helpers原理
helpers.js中向外暴露了四個方法，分別爲mapState,mapGetters,mapMutations和mapAction。這四個輔助方法
幫助開發者在組件中快速的引用本身定義的state,getters,mutations和actions。首先了解其用法再深刻其原理
const store = new Vuex.Store({
state: { count: 1 },
getters: {
square (state, getters) {
return Math.pow(state.count, 2);
}
},
mutations: {
add (state, number) {
state.count += number;
}
},
actions: {
add ({ commit }, number) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const pow = 2;
commit("add", Math.pow(number, pow));
resolve(number);
}, 1000);
});
}
}
});
以上是咱們定義的store
<template>
<div>
<div>count:{{count}}</div>
<div>getterCount:{{square}}</div>
<button @click="mutAdd(1)">mutAdd</button>
<button @click="actAdd(1)">actAdd</button>
</div>
</template>
<script>
import vuex from "./vuex/src";
export default {
name: "app",
computed: {
...vuex.mapState(["count"]),
...vuex.mapGetters(["square"])
},
methods: {
...vuex.mapMutations({ mutAdd: "add" }),
...vuex.mapActions({ actAdd: "add" })
}
};
</script>
<style scoped>
</style>
而後經過mapXXX的方式將store引入組件並使用。觀察這幾個方法的引用方式，能夠知道這幾個方法最終都會返回一個
對象，對象中全部的值都是一個函數，再經過展開運算符把這些方法分別注入到computed和methods屬性中。對於mapState
和mapGetters而言，返回對象中的函數，執行後會返回傳入參數對應的值（return store.state[key];或者return store.getters[key]），
而對於mapMutations和mapActions而言，返回對象中的函數，將執行commit（[key],payload），或者dispatch（[key],payload）
這就是這幾個方法的簡單原理，接下去將一個個分析vuex中的實現
mapState和mapGetters
export const mapState = function (states) {
// 定義一個返回結果map
const res = {};
// 規範化state
normalizeMap(states).forEach(({ key, val }) => {
// 賦值
res[key] = function mappedState () {
const state = this.$store.state;
const getters = this.$store.getters;
return typeof val === "function"
? val.call(this, state, getters)
: state[val];
};
});
// 返回結果
return res;
};
首先看mapsState最終的返回值res是一個對象，傳入的參數是咱們想要map出來的幾個屬性，mapState能夠傳入一個字符串數組或者是對象數組，字符串數組中包含的是引用的屬性，對象數組包含的是使用值與引用的映射，這兩種形式的傳參，咱們須要經過normalizeMap進行規範化，統一返回一個對象數組
function normalizeMap (map) {
return Array.isArray(map)
? map.map(key => ({ key, val: key }))
: Object.keys(map).map(key => ({ key, val: map[key] }))
}
normalizeMap函數首先判斷傳入的值是否爲數組，如果，則返回一個key和val都爲數組元素的對象數組，若是不是數組，則判斷傳入值爲一個對象，接着遍歷該對象，返回一個以對象鍵值爲key和val值的對象數組。此時經過normalizeMap以後的map都將是一個對象數組。
接着遍歷規範化以後的數組，對返回值對象進行賦值，賦值函數執行後返回state對應key的值若是傳入值爲一個函數，則將getters和state做爲參數傳入並執行，最終返回該對象，這樣在computed屬性中展開後就能直接經過key來引用對應state的值了。
mapGetters與mapState的實現原理基本一致
export const mapGetters = function (getters) {
const res = {};
normalizeMap(getters)
.forEach(({ key, val }) => {
res[key] = function mappedGetter () {
return this.$store.getters[val];
};
});
return res;
};
mapActions和mapMutations
export const mapActions = function (actions) {
const res = {};
normalizeMap(actions)
.forEach(({ key, val }) => {
res[key] = function (...args) {
const dispatch = this.$store.dispatch;
return typeof val === "function"
? val.apply(this, [dispatch].concat(args))
: dispatch.apply(this, [val].concat(args));
};
});
return res;
};
mapActions執行後也將返回一個對象，對象的key用於組件中引用，對象中value爲一個函數，該函數傳參是dispatch執行時的payload，其中val若是不是一個函數，則判斷其爲actionType經過dispath(actionType,payload)來觸發對應的action若是傳入的參數爲一個函數則將dispatch和payload做爲參數傳入並執行，這樣能夠實如今mapAction時組合調用多個action，或者自定義一些其餘行爲。最終返回該對象，在組件的methods屬性中展開後，能夠經過調用key對應的函數來觸發action。
mapMutation的實現原理與mapActions大同小異
export const mapMutations = function (mutations) {
const res = {};
normalizeMap(mutations)
.forEach(({ key, val }) => {
res[key] = function mappedMutation (...args) {
const commit = this.$store.commit;
return typeof val === "function"
? val.apply(this, [commit].concat(args))
: commit.apply(this, [val].concat(args));
};
});
return res;
};
module
爲了方便進行store中不一樣功能的切分，在vuex中能夠將不一樣功能組裝成一個單獨的模塊，模塊內部能夠單獨管理state，也能夠訪問到全局狀態。
用法
// main.js
const store = new Vuex.Store({
state: {},
getters: {},
mutations: {},
actions: {},
modules: {
a: {
namespaced: true,
state: { countA: 9 },
getters: {
sqrt (state) {
return Math.sqrt(state.countA);
}
},
mutations: {
miner (state, payload) {
state.countA -= payload;
}
},
actions: {
miner (context) {
console.log(context);
}
}
}
}
});
//app.vue
<template>
<div>
<div>moduleSqrt:{{sqrt}}</div>
<div>moduleCount:{{countA}}</div>
<button @click="miner(1)">modMutAdd</button>
</div>
</template>
<script>
import vuex from "./vuex/src";
export default {
name: "app",
created () {
console.log(this.$store);
},
computed: {
...vuex.mapGetters("a", ["sqrt"]),
...vuex.mapState("a", ["countA"])
},
methods: {
...vuex.mapMutations("a", ["miner"])
}
};
</script>
<style scoped>
</style>
上述代碼中，咱們定義了一個key爲a的module，將其namespaced設置成了true，對於namespace=false的模塊，它將自動繼承父模塊的命名空間。對於模塊a，他有如下幾點特性
- 擁有本身獨立的state
- getters和actions中可以訪問到state,getters，rootState, rootGetters
- mutations中只能改變模塊中的state
根據以上特性，能夠將以後的module的實現分爲幾個部分
- 用什麼樣的數據格式存放module
- 如何建立一個模塊的context，實現state，commit, dispatch， getters的封裝，而且讓commit只改變內部的state，另外讓模塊中的
getters，dispatch保持對根模塊的可訪問性
- 如何進行模塊中getters, mutations, actions的註冊，讓其與namespace進行綁定
- 輔助方法該如何去找到namespace下getters，mutations和actions,並將其注入組件中
構造嵌套的module結構
vuex最後構造出的module是這樣的一種嵌套的結構
第一級是一個root，以後的的每一級都有一個_rawModule和_children屬性，分別存放自身的getters，mutations和actions和
子級。實現這樣的數據結構用一個簡單的遞歸即可以完成
首先是咱們的入參，大概是以下的結構
{
state: {},
getters: {},
mutations: {},
actions: {},
modules: {
a: {
namespaced: true,
state: {},
getters: {},
mutations: {},
actions: {}
},
b: {
namespaced: true,
state: {},
getters: {},
mutations: {},
actions: {}
}
}
}
咱們會在store的構造函數中將這個對象做爲ModuleCollection實例化的參數
export class Store {
constructor (options = {}) {
this._modules = new ModuleCollection(options);
}
}
全部的嵌套結構的構造都在ModuleCollection實例化的過程當中進行
// module-collection.js
export default class ModuleCollection {
constructor (rawRootModule) {
// 註冊根module，入參：path,module,runtime
this.register([], rawRootModule, false);
}
// 根據路徑獲取模塊，從root開始搜索
get (path) {
return path.reduce((module, key) => module.getChild(key), this.root);
}
// 1.todo runtime的做用？
register (path, rawModule, runtime = true) {
// 生成module
const newModule = new Module(rawModule, runtime);
if (path.length === 0) { // 根模塊，註冊在root上
this.root = newModule;
} else { // 非根模塊，獲取父模塊，掛載
const parent = this.get(path.slice(0, -1));
parent.addChild(path[path.length - 1], newModule);
}
// 模塊上是否含有子模塊，有則註冊子模塊
if (rawModule.modules) {
forEachValue(rawModule.modules, (newRawModule, key) => {
this.register(path.concat(key), newRawModule, runtime);
});
}
}
}
// module.js
export default class Module {
addChild (key, module) {
this._children[key] = module;
}
}
實例化時首先會執行register函數，在register函數中根據傳入的rawModule建立一個Module的實例而後根據註冊的路徑判斷是否爲根模塊，若是是，則將該module實例掛載在root屬性上，若是不是則經過get方法找到該模塊的父模塊，將其經過模塊的addChild方法掛載在父模塊的_children屬性上，最後判斷該模塊是否含有嵌套模塊，若是有則遍歷嵌套模塊，遞歸執行register方法，這樣就能構造如上圖所示的嵌套模塊結構了。有了以上這樣的結構，咱們能夠用reduce方法經過path來獲取指定路徑下的模塊，也能夠用遞歸的方式對全部的模塊進行統一的操做，大大方便了模塊的管理。
構造localContext
有了基本的模塊結構後，下面的問題就是如何進行模塊做用域的封裝了，讓每一個模塊有本身的state而且對於這個state有本身管理這個state的方法，而且咱們但願這些方法也可以訪問到全局的一些屬性。
總結一下如今咱們要作的事情，
// module
{
state: {},
getters: {}
...
modules:{
n1:{
namespaced: true,
getters: {
g(state, rootState) {
state.s // => state.n1.s
rootState.s // => state.s
}
},
mutations: {
m(state) {
state.s // => state.n1.s
}
},
actions: {
a({state, getters, commit, dispatch}) {
commit("m"); // => mutations["n1/m"]
dispatch("a1"); // => actions["n1/a1"]
getters.g // => getters["n1/g"]
},
a1(){}
}
}
}
}
在namespaced=true的模塊中，訪問到的state,getters都是自模塊內部的state和getters,只有rootState,以及rootGetters指向根模塊的state和getters；另外，在模塊中commit觸發的都是子模塊內部的mutations，dispatch觸發的都是子模塊內部的actions。在vuex中經過路徑匹配去實現這種封裝。
//state
{
"s": "any"
"n1": {
"s": "any",
"n2": {
"s": "any"
}
}
}
// getters
{
"g": function () {},
"n1/g": function () {},
"n1/n2/g": function () {}
}
// mutations
{
"m": function () {},
"n1/m": function () {},
"n1/n2/m": function () {}
}
// actions
{
"a": function () {},
"n1/a": function () {},
"n1/n2/a": function () {}
}
vuex中要構造這樣一種數據結構，去存儲各個數據項，而後將context中的commit方法重寫，將commit(type)代理至namespaceType以實現commit方法的封裝，相似的dispatch也是經過這種方式進行封裝，而getters則是實現了一個getterProxy,將key代理至store.getters[namespace+key]上，而後在context中的getters替換成該getterProxy，而state則是利用了以上這種數據結構，直接找到對應path的state賦給context.state，這樣經過context訪問到的都是模塊內部的數據了。
接着來看看代碼實現
installModule (store, state, path, module, hot) {
const isRoot = !path.length;
// 獲取namespace
const namespace = store._modules.getNamespace(path);
}
全部數據項的構造，以及context的構造都在store.js的installModule方法中，首先經過傳入的path獲取namespace
// 根據路徑返回namespace
getNamespace (path) {
let module = this.root;
return path.reduce((namespace, key) => {
module = module.getChild(key);
return namespace + (module.namespaced ? `${key}/` : "");
}, "");
}
獲取namespace的方法是ModuleCollections的一個實例方法，它會逐層訪問modules,判斷namespaced屬性，若爲true則將path[index]拼在namespace上
這樣就得到了完整的namespace
以後是嵌套結構state的實現
installModule (store, state, path, module, hot) {
// 構造嵌套state
if (!isRoot && !hot) {
const moduleName = path[path.length - 1];
const parentState = getNestedState(state, path.slice(0, -1));
Vue.set(parentState, moduleName, module.state);
}
}
首先根據出path獲取state上對應的parentState,此處入參state就是store.state
function getNestedState (state, path) {
return path.length
? path.reduce((state, key) => state[key], state)
: state
}
其中的getNestState，用於根據路徑獲取相應的state,在獲取parentState以後，將module.state掛載在parentState[moduleName]上。
這樣就構造了一個如上說所述的嵌套state結構。
在獲得namespace以後咱們須要將傳入的getters，mutations，actions根據namespace去構造了
installModule (store, state, path, module, hot) {
module.forEachMutation((mutation, key) => {
const namespacdType = namespace + key;
this.registerMutation(store, namespacdType, mutation, local);
});
module.forEachAction((action, key) => {
const type = action.root ? type : namespace + key;
const handler = action.handler || action;
this.registerAction(store, type, handler, local);
});
module.forEachGetters((getter, key) => {
const namespacedType = namespace + key
this.registerGetter(store, namespacedType, getter, local);
});
}
getters，mutations，actions的構造有着幾乎同樣的方式，只不過度別掛載在store._getters,store._mutations,stors._actions上而已，所以咱們值分析mutations的構造過程。首先是forEachMutation遍歷module中的mutations對象，而後經過ergisterMustions註冊到以namespace+key的
key上
function registerMutation (store, type, handler, local) {
const entry = store._mutations[type] || (store._mutations[type] = [])
entry.push(function wrappedMutationHandler (payload) {
handler.call(store, local.state, payload)// mutation中第一個參數是state，第二個參數是payload
})
}
實際上會存放在store._mutations[namespace+key]上。
經過上述操做，咱們已經完成了封裝的一半，接下來咱們還要爲每一個module實現一個context，在這個context裏面有state，getters,commit和actions，
可是這裏的state,getters只能訪問module裏面的state和getters，而commit和actions也只能觸達到module內部的state和getters
installModule (store, state, path, module, hot) {
// 註冊mutation事件隊列
const local = module.context = makeLocalContext(store, namespace, path);
}
咱們會在installModule裏面去實現這個context,而後將組裝完的context分別賦給local和module.context，
而這個local在會在register的時候傳遞給getters,mutations, actions做爲參數
function makeLocalContext (store, namespace, path) {
const noNamespace = namespace === "";
const local = {
dispatch: noNamespace
? store.dispatch
: (_type, _payload, _options) => {
const args = unifyObjectStyle(_type, _payload, _options);
let { type } = args;
const { payload, options } = args;
if (!options || !options.root) {
type = namespace + type;
}
store.dispatch(type, payload, options);
},
commit: noNamespace
? store.commit
: (_type, _payload, _options) => {
const args = unifyObjectStyle(_type, _payload, _options);
let { type } = args;
const { payload, options } = args;
if (!options || !options.root) {
type = namespace + type;
}
store.commit(type, payload, options);
}
};
return local;
}
首先看context中的commit和dispatch方法的實現二者實現方式大同小異，咱們只分析commit，首先經過namespace判斷是否爲封裝模塊，若是是則返回一個匿名函數，該匿名函數首先進行參數的規範化，以後會調用store.dispatch，而此時的調用會將傳入的type進行偷換換成namespace+type，因此咱們在封裝的module中執行的commit[type]實際上都是調用store._mutations[namespace+type]的事件隊列
function makeLocalContext (store, namespace, path) {
const noNamespace = namespace === "";
Object.defineProperties(local, {
state: {
get: () => getNestedState(store.state, path)
},
getters: {
get: noNamespace
? () => store.getters
: () => makeLocalGetters(store, namespace)
}
});
return local;
}
而後是state，經過local.state訪問到的都是將path傳入getNestedState獲取到的state,實際上就是module內的state,而getters則是經過代理的方式實現訪問內部getters的
function makeLocalGetters (store, namespace) {
const gettersProxy = {}
const splitPos = namespace.length
Object.keys(store.getters).forEach(type => {
// skip if the target getter is not match this namespace
if (type.slice(0, splitPos) !== namespace) return
// extract local getter type
const localType = type.slice(splitPos)
// Add a port to the getters proxy.
// Define as getter property because
// we do not want to evaluate the getters in this time.
Object.defineProperty(gettersProxy, localType, {
get: () => store.getters[type],
enumerable: true
})
})
return gettersProxy
}
首先聲明一個代理對象gettersProxy，以後遍歷store.getters，判斷是否爲namespace的路徑全匹配，若是是，則將gettersProxy
的localType屬性代理至store.getters[type]，而後將gettersProxy返回，這樣經過local.getters訪問的localType實際上
就是stores.getters[namespace+type]了。
如下是一個小小的總結
獲取路徑對應的命名空間（namespaced=true時拼上）->state拼接到store.state上使其成爲一個基於path的嵌套結構->註冊localContext
註冊localContext
- Dispatch:namespace->扁平化參數->無root條件直接觸發namespace+type->有root或hot條件，觸發type
- commit->扁平化參數->無root條件直接觸發namespace+type->有root或hot條件，觸發type
- State:根據path查找state
- Getters:聲明代理對象，遍歷store.getters對象，匹配key和namespace,命中後將其localType指向全路徑
- 1. 逐行粒度的vuex源碼分析
- 2. 逐行分析jQuery源碼
- 3. 逐行級源碼分析系列(一) Vuex
- 4. Vuex源碼分析
- 5. Vuex 源碼分析
- 6. vuex源碼分析
- 7. 帶你逐行分析 HashMap 源碼
- 8. 逐行分析jQuery源碼奧祕-1
- 9. 逐行解析Axios源碼
- 10. Vue3 源碼逐行解析
- 更多相關文章...
- • 高併發系統的分析和設計 - 紅包項目實戰
- • Hibernate的運行流程 - Hibernate教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • Java Agent入門實戰（二）-Instrumentation源碼概述
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 逐行粒度的vuex源碼分析
- 2. 逐行分析jQuery源碼
- 3. 逐行級源碼分析系列(一) Vuex
- 4. Vuex源碼分析
- 5. Vuex 源碼分析
- 6. vuex源碼分析
- 7. 帶你逐行分析 HashMap 源碼
- 8. 逐行分析jQuery源碼奧祕-1
- 9. 逐行解析Axios源碼
- 10. Vue3 源碼逐行解析