深入理解Vuex 框架

Vuex是一個專為Vue服務，用於管理頁面資料狀態、提供統一資料操作的生態系統。它集中於MVC模式中的Model層，規定所有的資料操作必須通過 action – mutation – state change 的流程來進行，再結合Vue的資料檢視雙向繫結特性來實現頁面的展示更新。統一的頁面狀態管理以及操作處理，可以讓複雜的元件互動變得簡單清晰，同時可在除錯模式下進行時光機般的倒退前進操作，檢視資料改變過程，使code debug更加方便。

最近在開發的專案中用到了Vuex來管理整體頁面狀態，遇到了很多問題。決定研究下原始碼，在答疑解惑之外，能深入學習其實現原理。

先將問題丟擲來，使學習和研究更有針對性：

使用Vuex只需執行 Vue.use(Vuex)，並在Vue的配置中傳入一個store物件的示例，store是如何實現注入的？
state內部是如何實現支援模組配置和模組巢狀的？
在執行dispatch觸發action（commit同理）的時候，只需傳入（type, payload），action執行函式中第一個引數store從哪裡獲取的？
如何區分state是外部直接修改，還是通過mutation方法修改的？
除錯時的“時空穿梭”功能是如何實現的？

注：本文對有Vuex有實際使用經驗的同學幫助更大，能更清晰理解Vuex的工作流程和原理，使用起來更得心應手。初次接觸的同學，可以先參考Vuex

官方文件進行基礎概念的學習。

一、框架核心流程

進行原始碼分析之前，先了解一下官方文件中提供的核心思想圖，它也代表著整個Vuex框架的執行流程。
vuex-core
如圖示，Vuex為Vue Components建立起了一個完整的生態圈，包括開發中的API呼叫一環。圍繞這個生態圈，簡要介紹一下各模組在核心流程中的主要功能：

Vue Components：Vue元件。HTML頁面上，負責接收使用者操作等互動行為，執行dispatch方法觸發對應action進行迴應。
dispatch：操作行為觸發方法，是唯一能執行action的方法。
actions：操作行為處理模組。負責處理Vue Components接收到的所有互動行為。包含同步/非同步操作，支援多個同名方法，按照註冊的順序依次觸發。向後臺API請求的操作就在這個模組中進行，包括觸發其他action以及提交mutation的操作。該模組提供了Promise的封裝，以支援action的鏈式觸發。

commit：狀態改變提交操作方法。對mutation進行提交，是唯一能執行mutation的方法。
mutations：狀態改變操作方法。是Vuex修改state的唯一推薦方法，其他修改方式在嚴格模式下將會報錯。該方法只能進行同步操作，且方法名只能全域性唯一。操作之中會有一些hook暴露出來，以進行state的監控等。
state：頁面狀態管理容器物件。集中儲存Vue components中data物件的零散資料，全域性唯一，以進行統一的狀態管理。頁面顯示所需的資料從該物件中進行讀取，利用Vue的細粒度資料響應機制來進行高效的狀態更新。
getters：state物件讀取方法。圖中沒有單獨列出該模組，應該被包含在了render中，Vue Components通過該方法讀取全域性state物件。

Vue元件接收互動行為，呼叫dispatch方法觸發action相關處理，若頁面狀態需要改變，則呼叫commit方法提交mutation修改state，通過getters獲取到state新值，重新渲染Vue Components，介面隨之更新。

二、目錄結構介紹

開啟Vuex專案，看下原始碼目錄結構。

dir_structure

Vuex提供了非常強大的狀態管理功能，原始碼程式碼量卻不多，目錄結構劃分也很清晰。先大體介紹下各個目錄檔案的功能：

module：提供module物件與module物件樹的建立功能；
plugins：提供開發輔助外掛，如“時光穿梭”功能，state修改的日誌記錄功能等；
helpers.js：提供action、mutations以及getters的查詢API；
index.js：是原始碼主入口檔案，提供store的各module構建安裝；
mixin.js：提供了store在Vue例項上的裝載注入；
util.js：提供了工具方法如find、deepCopy、forEachValue以及assert等方法。

三、初始化裝載與注入

瞭解大概的目錄及對應功能後，下面開始進行原始碼分析。index.js中包含了所有的核心程式碼，從該檔案入手進行分析。

3.1 裝載例項

先看個簡單的例子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

/** * store.js檔案 * 建立store物件，配置state、action、mutation以及getter * **/ import Vue from 'vue' import Vuex from 'vuex' // install Vuex框架 Vue.use(Vuex) // 建立並匯出store物件。為了方便，不配置任何引數 export default new Vuex.Store()

store.js檔案中，載入Vuex框架，建立並匯出一個空配置的store物件例項。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

/** * vue-index.js檔案 * * **/ import Vue from 'vue' import App from './../pages/app.vue' import store from './store.js' new Vue({ el: '#root', router, store, render: h => h(App) })

然後在index.js中，正常初始化一個頁面根級別的Vue元件，傳入這個自定義的store物件。

如問題1所述，以上例項除了Vue的初始化程式碼，只是多了一個store物件的傳入。一起看下原始碼中的實現方式。

3.2 裝載分析

index.js檔案程式碼執行開頭，定義區域性 Vue 變數，用於判斷是否已經裝載和減少全域性作用域查詢。

let Vue

然後判斷若處於瀏覽器環境下且載入過Vue，則執行install方法。

1 2 3 4

// auto install in dist mode if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) }

install方法將Vuex裝載到Vue物件上，Vue.use(Vuex) 也是通過它執行，先看下Vue.use方法實現：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

function (plugin: Function | Object) { /* istanbul ignore if */ if (plugin.installed) { return } // additional parameters const args = toArray(arguments, 1) args.unshift(this) if (typeof plugin.install === 'function') { // 實際執行外掛的install方法 plugin.install.apply(plugin, args) } else { plugin.apply(null, args) } plugin.installed = true return this }

若是首次載入，將區域性Vue變數賦值為全域性的Vue物件，並執行applyMixin方法，install實現如下：

1 2 3 4 5 6 7 8 9 10

function install (_Vue) { if (Vue) { console.error( '[vuex] already installed. Vue.use(Vuex) should be called only once.' ) return } Vue = _Vue applyMixin(Vue) }

來看下applyMixin方法內部程式碼。如果是2.x.x以上版本，可以使用 hook 的形式進行注入，或使用封裝並替換Vue物件原型的_init方法，實現注入。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

export default function (Vue) { const version = Number(Vue.version.split('.')[0]) if (version >= 2) { const usesInit = Vue.config._lifecycleHooks.indexOf('init') > -1 Vue.mixin(usesInit ? { init: vuexInit } : { beforeCreate: vuexInit }) } else { // override init and inject vuex init procedure // for 1.x backwards compatibility. const _init = Vue.prototype._init Vue.prototype._init = function (options = {}) { options.init = options.init ? [vuexInit].concat(options.init) : vuexInit _init.call(this, options) } }

具體實現：將初始化Vue根元件時傳入的store設定到this物件的$store屬性上，子元件從其父元件引用$store屬性，層層巢狀進行設定。在任意元件中執行 this.$store 都能找到裝載的那個store物件，vuexInit方法實現如下：

1 2 3 4 5 6 7 8 9

function vuexInit () { const options = this.$options // store injection if (options.store) { this.$store = options.store } else if (options.parent && options.parent.$store) { this.$store = options.parent.$store } }

看個圖例理解下store的傳遞。

頁面Vue結構圖：
cart_vue_structure

對應store流向：
cart_vue_structure

四、store物件構造

上面對Vuex框架的裝載以及注入自定義store物件進行分析，解決了問題1。接下來詳細分析store物件的內部功能和具體實現，來解答 為什麼actions、getters、mutations中能從arguments[0]中拿到store的相關資料? 等問題。

store物件實現邏輯比較複雜，先看下構造方法的整體邏輯流程來幫助後面的理解：

cart_vue_structure

4.1 環境判斷

開始分析store的建構函式，分小節逐函式逐行的分析其功能。

1 2 3

constructor (options = {}) { assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`) assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)

在store建構函式中執行環境判斷，以下都是Vuex工作的必要條件：

已經執行安裝函式進行裝載；
支援Promise語法。

assert函式是一個簡單的斷言函式的實現，一行程式碼即可實現。

1 2 3

function assert (condition, msg) { if (!condition) throw new Error(`[vuex] ${msg}`) }

4.2 資料初始化、module樹構造

環境判斷後，根據new構造傳入的options或預設值，初始化內部資料。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

const { state = {}, plugins = [], strict = false } = options // store internal state this._committing = false // 是否在進行提交狀態標識 this._actions = Object.create(null) // acitons操作物件 this._mutations = Object.create(null) // mutations操作物件 this._wrappedGetters = Object.create(null) // 封裝後的getters集合物件 this._modules = new ModuleCollection(options) // Vuex支援store分模組傳入，儲存分析後的modules this._modulesNamespaceMap = Object.create(null) // 模組名稱空間map this._subscribers = [] // 訂閱函式集合，Vuex提供了subscribe功能 this.

深入理解Vuex 框架

一、框架核心流程

二、目錄結構介紹