vuex原始碼分析
本文是一篇逐行粒度的vuex原始碼分析，帶你一步一步去實現一個vuex，不同於市面上其他的原始碼分析，本文不會從上帝視角去談vuex的設計，而是將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重新求值，觸發檢視重新渲染。
為什麼需要vuex
- 解決元件間的通訊和傳統事件模式過長的呼叫鏈難以除錯的問題，在vue的使用中，我們利用vue提供的事件模式實現父子間的通訊，或者利用eventBus的方式進行多元件 之間的通行，但是隨著專案變得龐大，呼叫鏈有時會變的很長，會無法定位到事件的發起者，並且基於事件模式的除錯是會讓開發者 頭疼不已，下一個接手專案的人很難知道一個事件的觸發會帶來哪些影響，vuex將狀態層和檢視層進行抽離，所有的狀態得到統一的管理 所有的元件共享一個state，有了vuex我們的關注從事件轉移到了資料，我們可以只關心哪些元件引用了狀態中的某個值，devtools實時反應 state的當前狀態，讓除錯變得簡單。另外元件間的通訊，從訂閱同一個事件，轉移到了共享同一個資料，變得更加簡易。
- 解決父子元件間資料傳遞問題，在vue的開發中我們會通過props或者inject去實現父子元件的資料傳遞，但是當元件層級過深時 props的傳遞會帶來增加冗餘程式碼的問題，中間一些不需特定資料的元件為了進行資料傳遞會注入不必要的資料，而inject的資料傳遞本來就是有缺陷的 當代碼充斥著各種provided和inject時，雜亂的根本不知道元件inject的資料是在哪裡provide進來的。vuex將一些公用資料抽離並統一管理後，直接讓這種複雜的資料傳遞變得毫不費力。
一 install
為了實現通過Vue.use()方法引入vuex，需要為vuex定義一個install方法。vuex中的intall方法主要作用是將store例項注入到每一個vue元件中，具體實現方式如下
export function install (_Vue) {
// 避免重複安裝
if (Vue && Vue === _Vue) {
// 開發環境報錯
console.warn("duplicate install");
}
Vue = _Vue;
// 開始註冊全域性mixin
applyMixin(Vue);
}
複製程式碼
以上程式碼中通過定義一個全域性變數Vue儲存當前的引入的Vue來避免重複安裝，然後通過apllyMixin實現將store注入到各個例項中去
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. options.store,如果沒有則指向this. store。 此時我們在install執行後，通過在例項化根元件時把store傳入options就能將所有子元件的$store屬性都指向這個store了。 此外需要注意的時applyMixin執行時首先會判斷當前Vue的版本號，版本2以上通過mixin混入的方式在所有元件例項化的時候執行vueInit，而 版本2以下則通過options.init中插入執行的方式注入。以下時安裝函式的幾點總結
- 避免重複安裝
- 判斷版本，不同版本用不同方式注入初始方法，2之前通過options.init注入，2之後通過mixin注入
- 將store注入到所有vue的例項屬性$store中
二、如何實現一個簡單的commit
commit實際上就是一個比較簡單的釋出-訂閱模式的實現，不過這個過程中會涉及module的實現，state與getters之間響應式的實現方式，併為之後介紹actions可以做一些鋪墊
使用
首先回顧下commit的使用
// 例項化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的原理已經介紹完畢，所有的程式碼見分支 ofollow,noindex">github.com/miracle9312…
三、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能夠響應式變化的原理 具體程式碼見 github.com/miracle9312…
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指向全路徑 請戳原文連結 github.com/miracle9312… 如果覺得有所受益，請別忘了給個star