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;// 開始注冊全局mixinapplyMixin(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.$store屬性指向this.$options.store,如果沒有則指向this.$parent即父實例中的$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,runtimethis.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);// 為什么不直接賦值nullthis._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);});}// 注冊mutationregisterMutation (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的mutationcommit (_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...

三、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對應多個actionconst 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) {// 定義一個返回結果mapconst res = {};// 規范化statenormalizeMap(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,runtimethis.register([], rawRootModule, false);}// 根據路徑獲取模塊，從root開始搜索get (path) {return path.reduce((module, key) => module.getChild(key), this.root);}// 1.todo runtime的作用？register (path, rawModule, runtime = true) {// 生成moduleconst 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.srootState.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;// 獲取namespaceconst namespace = store._modules.getNamespace(path);}

所有數據項的構造，以及context的構造都在store.js的installModule方法中，首先通過傳入的path獲取namespace

// 根據路徑返回namespacegetNamespace (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) {// 構造嵌套stateif (!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 + keythis.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.lengthObject.keys(store.getters).forEach(type => {// skip if the target getter is not match this namespaceif (type.slice(0, splitPos) !== namespace) return// extract local getter typeconst 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指向全路徑

原文地址：https://segmentfault.com/a/1190000017219468

轉載于:https://www.cnblogs.com/lovellll/p/10121808.html

總結

以上是生活随笔為你收集整理的逐行粒度的vuex源码分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。