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為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項目，看下源碼目錄結構。
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 變量，用於判斷是否已經裝載和減少全局作用域查找。
|
1
|
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結構圖：
對應store流向：
四、store對象構造
上面對Vuex框架的裝載以及注入自定義store對象進行分析，解決了問題1。接下來詳細分析store對象的內部功能和具體實現，來解答 為什么actions、getters、mutations中能從arguments[0]中拿到store的相關數據? 等問題。
store對象實現邏輯比較復雜，先看下構造方法的整體邏輯流程來幫助后面的理解：
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._watcherVM = new Vue() // Vue組件用於watch監視變化
|
調用 new Vuex.store(options) 時傳入的options對象，用於構造ModuleCollection類，下面看看其功能。
|
1
2
3
4
5
6
7
8
9
10
|
constructor (rawRootModule) {
// register root module (Vuex.Store options)
this.root = new Module(rawRootModule, false)
// register all nested modules
if (rawRootModule.modules) {
forEachValue(rawRootModule.modules, (rawModule, key) => {
this.register([key], rawModule, false)
})
}
|
ModuleCollection主要將傳入的options對象整個構造為一個module對象，並循環調用 this.register([key], rawModule, false) 為其中的modules屬性進行模塊注冊，使其都成為module對象，最后options對象被構造成一個完整的組件樹。ModuleCollection類還提供了modules的更替功能，詳細實現可以查看源文件module-collection.js。
4.3 dispatch與commit設置
繼續回到store的構造函數代碼。
|
1
2
3
4
5
6
7
8
9
10
11
|
// bind commit and dispatch to self
const store = this
const { dispatch, commit } = this
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)
}
|
封裝替換原型中的dispatch和commit方法，將this指向當前store對象。dispatch和commit方法具體實現如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
dispatch (_type, _payload) {
// check object-style dispatch
const {
type,
payload
} = unifyObjectStyle(_type, _payload) // 配置參數處理
// 當前type下所有action處理函數集合
const entry = this._actions[type]
if (!entry) {
console.error(`[vuex] unknown action type: ${type}`)
return
}
return entry.length > 1
? Promise.all(entry.map(handler => handler(payload)))
: entry[0](payload)
}
|
前面提到，dispatch的功能是觸發並傳遞一些參數（payload）給對應type的action。因為其支持2種調用方法，所以在dispatch中，先進行參數的適配處理，然后判斷action type是否存在，若存在就逐個執行（注：上面代碼中的this._actions[type] 以及 下面的 this._mutations[type] 均是處理過的函數集合，具體內容留到后面進行分析）。
commit方法和dispatch相比雖然都是觸發type，但是對應的處理卻相對復雜，代碼如下。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
commit (_type, _payload, _options) {
// check object-style commit
const {
type,
payload,
options
} = unifyObjectStyle(_type, _payload, _options)
const mutation = { type, payload }
const entry = this._mutations[type]
if (!entry) {
console.error(`[vuex] unknown mutation type: ${type}`)
return
}
// 專用修改state方法，其他修改state方法均是非法修改
this._withCommit(() => {
entry.forEach(function commitIterator (handler) {
handler(payload)
})
})
// 訂閱者函數遍歷執行，傳入當前的mutation對象和當前的state
this._subscribers.forEach(sub => sub(mutation, this.state))
if (options && options.silent) {
console.warn(
`[vuex] mutation type: ${type}. Silent option has been removed. ` +
'Use the filter functionality in the vue-devtools'
)
}
}
|
該方法同樣支持2種調用方法。先進行參數適配，判斷觸發mutation type，利用_withCommit方法執行本次批量觸發mutation處理函數，並傳入payload參數。執行完成后，通知所有_subscribers（訂閱函數）本次操作的mutation對象以及當前的state狀態，如果傳入了已經移除的silent選項則進行提示警告。
4.4 state修改方法
_withCommit是一個代理方法，所有觸發mutation的進行state修改的操作都經過它，由此來統一管理監控state狀態的修改。實現代碼如下。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
_withCommit (fn) {
// 保存之前的提交狀態
const committing = this._committing
// 進行本次提交，若不設置為true，直接修改state，strict模式下，Vuex將會產生非法修改state的警告
this._committing = true
// 執行state的修改操作
fn()
// 修改完成，還原本次修改之前的狀態
this._committing = committing
}
|
緩存執行時的committing狀態將當前狀態設置為true后進行本次提交操作，待操作完畢后，將committing狀態還原為之前的狀態。
4.5 module安裝
綁定dispatch和commit方法之后，進行嚴格模式的設置，以及模塊的安裝（installModule）。由於占用資源較多影響頁面性能，嚴格模式建議只在開發模式開啟，上線后需要關閉。
|
1
2
3
4
5
6
7
|
// strict mode
this.strict = strict
// init root module.
// this also recursively registers all sub-modules
// and collects all module getters inside this._wrappedGetters
installModule(this, state, [], this._modules.root)
|
4.5.1 初始化rootState
上述代碼的備注中，提到installModule方法初始化組件樹根組件、注冊所有子組件，並將其中所有的getters存儲到this._wrappedGetters屬性中，讓我們看看其中的代碼實現。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
function installModule (store, rootState, path, module, hot) {
const isRoot = !path.length
const namespace = store._modules.getNamespace(path)
// register in namespace map
if (namespace) {
store._modulesNamespaceMap[namespace] = module
}
// 非根組件設置 state 方法
if (!isRoot && !hot) {
const parentState = getNestedState(rootState, path.slice(0, -1))
const moduleName = path[path.length - 1]
store._withCommit(() => {
Vue.set(parentState, moduleName, module.state)
})
}
······
|
判斷是否是根目錄，以及是否設置了命名空間，若存在則在namespace中進行module的存儲，在不是根組件且不是 hot 條件的情況下，通過getNestedState方法拿到該module父級的state，拿到其所在的 moduleName ，調用 Vue.set(parentState, moduleName, module.state) 方法將其state設置到父級state對象的moduleName屬性中，由此實現該模塊的state注冊（首次執行這里，因為是根目錄注冊，所以並不會執行該條件中的方法）。getNestedState方法代碼很簡單，分析path拿到state，如下。
|
1
2
3
4
5
|
function getNestedState (state, path) {
return path.length
? path.reduce((state, key) => state[key], state)
: state
}
|
4.5.2 module上下文環境設置
|
1
|
const local = module.context = makeLocalContext(store, namespace, path)
|
命名空間和根目錄條件判斷完畢后，接下來定義local變量和module.context的值，執行makeLocalContext方法，為該module設置局部的 dispatch、commit方法以及getters和state（由於namespace的存在需要做兼容處理）。
4.5.3 mutations、actions以及getters注冊
定義local環境后，循環注冊我們在options中配置的action以及mutation等。逐個分析各注冊函數之前，先看下模塊間的邏輯關系流程圖：
下面分析代碼邏輯：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// 注冊對應模塊的mutation，供state修改使用
module.forEachMutation((mutation, key) => {
const namespacedType = namespace + key
registerMutation(store, namespacedType, mutation, local)
})
// 注冊對應模塊的action，供數據操作、提交mutation等異步操作使用
module.forEachAction((action, key) => {
const namespacedType = namespace + key
registerAction(store, namespacedType, action, local)
})
// 注冊對應模塊的getters，供state讀取使用
module.forEachGetter((getter, key) => {
const namespacedType = namespace + key
registerGetter(store, namespacedType, getter, local)
})
|
registerMutation方法中，獲取store中的對應mutation type的處理函數集合，將新的處理函數push進去。這里將我們設置在mutations type上對應的 handler 進行了封裝，給原函數傳入了state。在執行 commit(‘xxx’, payload) 的時候，type為 xxx 的mutation的所有handler都會接收到state以及payload，這就是在handler里面拿到state的原因。
|
1
2
3
4
5
6
7
8
9
|
function registerMutation (store, type, handler, local) {
// 取出對應type的mutations-handler集合
const entry = store._mutations[type] || (store._mutations[type] = [])
// commit實際調用的不是我們傳入的handler，而是經過封裝的
entry.push(function wrappedMutationHandler (payload) {
// 調用handler並將state傳入
handler(local.state, payload)
})
}
|
action和getter的注冊也是同理的，看一下代碼（注：前面提到的 this.actions 以及 this.mutations在此處進行設置）。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
function registerAction (store, type, handler, local) {
// 取出對應type的actions-handler集合
const entry = store._actions[type] || (store._actions[type] = [])
// 存儲新的封裝過的action-handler
entry.push(function wrappedActionHandler (payload, cb) {
// 傳入 state 等對象供我們原action-handler使用
let res = handler({
dispatch: local.dispatch,
commit: local.commit,
getters: local.getters,
state: local.state,
rootGetters: store.getters,
rootState: store.state
}, payload, cb)
// action需要支持promise進行鏈式調用，這里進行兼容處理
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
}
})
}
function registerGetter (store, type, rawGetter, local) {
// getters只允許存在一個處理函數，若重復需要報錯
if (store._wrappedGetters[type]) {
console.error(`[vuex] duplicate getter key: ${type}`)
return
}
// 存儲封裝過的getters處理函數
store._wrappedGetters[type] = function wrappedGetter (store) {
// 為原getters傳入對應狀態
return rawGetter(
local.state, // local state
local.getters, // local getters
store.state, // root state
store.getters // root getters
)
}
}
|
action handler比mutation handler以及getter wrapper多拿到dispatch和commit操作方法，因此action可以進行dispatch action和commit mutation操作。
4.5.4 子module安裝
注冊完了根組件的actions、mutations以及getters后，遞歸調用自身，為子組件注冊其state，actions、mutations以及getters等。
|
1
2
3
|
module.forEachChild((child, key) => {
installModule(store, rootState, path.concat(key), child, hot)
})
|
4.5.5 實例結合
前面介紹了dispatch和commit方法以及actions等的實現，下面結合一個官方的購物車實例中的部分代碼來加深理解。
Vuex配置代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
/
* store-index.js store配置文件
*
/
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import cart from './modules/cart'
import products from './modules/products'
import createLogger from '../../../src/plugins/logger'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
actions,
getters,
modules: {
cart,
products
},
strict: debug,
plugins: debug ? [createLogger()] : []
})
|
Vuex組件module中各模塊state配置代碼部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
/**
* cart.js
*
**/
const state = {
added: [],
checkoutStatus: null
}
/**
* products.js
*
**/
const state = {
all: []
}
|
加載上述配置后，頁面state結構如下圖：
state中的屬性配置都是按照option配置中module path的規則來進行的，下面看action的操作實例。
Vuecart組件代碼部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
/**
* Cart.vue 省略template代碼，只看script部分
*
**/
export default {
methods: {
// 購物車中的購買按鈕，點擊后會觸發結算。源碼中會調用 dispatch方法
checkout (products) {
this.$store.dispatch('checkout', products)
}
}
}
|
Vuexcart.js組件action配置代碼部分：
|
1
2
3
4
5
6
7
8
9
10
11
|
const actions = {
checkout ({ commit, state }, products) {
const savedCartItems = [...state.added] // 存儲添加到購物車的商品
commit(types.CHECKOUT_REQUEST) // 設置提交結算狀態
shop.buyProducts( // 提交api請求，並傳入成功與失敗的cb-func
products,
() => commit(types.CHECKOUT_SUCCESS), // 請求返回成功則設置提交成功狀態
() => commit(types.CHECKOUT_FAILURE, { savedCartItems }) // 請求返回失敗則設置提交失敗狀態
)
}
}
|
Vue組件中點擊購買執行當前module的dispatch方法，傳入type值為 ‘checkout’，payload值為 ‘products’，在源碼中dispatch方法在所有注冊過的actions中查找’checkout’的對應執行數組，取出循環執行。執行的是被封裝過的被命名為wrappedActionHandler的方法，真正傳入的checkout的執行函數在wrappedActionHandler這個方法中被執行，源碼如下（注：前面貼過，這里再看一次）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
function wrappedActionHandler (payload, cb) {
let res = handler({
dispatch: local.dispatch,
commit: local.commit,
getters: local.getters,
state: local.state,
rootGetters: store.getters,
rootState: store.state
}, payload, cb)
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
}
}
|
handler在這里就是傳入的checkout函數，其執行需要的commit以及state就是在這里被傳入，payload也傳入了，在實例中對應接收的參數名為products。commit的執行也是同理的，實例中checkout還進行了一次commit操作，提交一次type值為types.CHECKOUT_REQUEST的修改，因為mutation名字是唯一的，這里進行了常量形式的調用，防止命名重復，執行跟源碼分析中一致，調用 function wrappedMutationHandler (payload) { handler(local.state, payload) } 封裝函數來實際調用配置的mutation方法。
看到完源碼分析和上面的小實例，應該能理解dispatch action和commit mutation的工作原理了。接着看源碼，看看getters是如何實現state實時訪問的。
4.6 store._vm組件設置
執行完各module的install后，執行resetStoreVM方法，進行store組件的初始化。
|
1
2
3
|
// initialize the store vm, which is responsible for the reactivity
// (also registers _wrappedGetters as computed properties)
resetStoreVM(this, state)
|
綜合前面的分析可以了解到，Vuex其實構建的就是一個名為store的vm組件，所有配置的state、actions、mutations以及getters都是其組件的屬性，所有的操作都是對這個vm組件進行的。
一起看下resetStoreVM方法的內部實現。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
function resetStoreVM (store, state) {
const oldVm = store._vm // 緩存前vm組件
// bind store public getters
store.getters = {}
const wrappedGetters = store._wrappedGetters
const computed = {}
// 循環所有處理過的getters，並新建computed對象進行存儲，通過Object.defineProperty方法為getters對象建立屬性，使得我們通過this.$store.getters.xxxgetter能夠訪問到該getters
forEachValue(wrappedGetters, (fn, key) => {
// use computed to leverage its lazy-caching mechanism
computed[key] = () => fn(store)
Object.defineProperty(store.getters, key, {
get: () => store._vm[key],
enumerable: true // for local getters
})
})
// use a Vue instance to store the state tree
// suppress warnings just in case the user has added
// some funky global mixins
const silent = Vue.config.silent
// 暫時將Vue設為靜默模式，避免報出用戶加載的某些插件觸發的警告
Vue.config.silent = true
// 設置新的storeVm，將當前初始化的state以及getters作為computed屬性（剛剛遍歷生成的）
store._vm = new Vue({
data: { state },
computed
})
// 恢復Vue的模式
Vue.config.silent = silent
// enable strict mode for new vm
if (store.strict) {
// 該方法對state執行$watch以禁止從mutation外部修改state
enableStrictMode(store)
}
// 若不是初始化過程執行的該方法，將舊的組件state設置為null，強制更新所有監聽者(watchers)，待更新生效，DOM更新完成后，執行vm組件的destroy方法進行銷毀，減少內存的占用
if (oldVm) {
// dispatch changes in all subscribed watchers
// to force getter re-evaluation.
store._withCommit(() => {
oldVm.state = null
})
Vue.nextTick(() => oldVm.$destroy())
}
}
|
resetStoreVm方法創建了當前store實例的_vm組件，至此store就創建完畢了。上面代碼涉及到了嚴格模式的判斷，看一下嚴格模式如何實現的。
|
1
2
3
4
5
|
function enableStrictMode (store) {
store._vm.$watch('state', () => {
assert(store._committing, `Do not mutate vuex store state outside mutation handlers.`)
}, { deep: true, sync: true })
}
|
很簡單的應用，監視state的變化，如果沒有通過 this._withCommit() 方法進行state修改，則報錯。
4.7 plugin注入
最后執行plugin的植入。
|
1
|
plugins.concat(devtoolPlugin).forEach(plugin => plugin(this))
|
devtoolPlugin提供的功能有3個：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// 1. 觸發Vuex組件初始化的hook
devtoolHook.emit('vuex:init', store)
// 2. 提供“時空穿梭”功能，即state操作的前進和倒退
devtoolHook.on('vuex:travel-to-state', targetState => {
store.replaceState(targetState)
})
// 3. mutation被執行時，觸發hook，並提供被觸發的mutation函數和當前的state狀態
store.subscribe((mutation, state) => {
devtoolHook.emit('vuex:mutation', mutation, state)
})
|
源碼分析到這里，Vuex框架的實現原理基本都已經分析完畢。
五、總結
最后我們回過來看文章開始提出的5個問題。
1. 問：使用Vuex只需執行 Vue.use(Vuex)，並在Vue的配置中傳入一個store對象的示例，store是如何實現注入的？
答：Vue.use(Vuex) 方法執行的是install方法，它實現了Vue實例對象的init方法封裝和注入，使傳入的store對象被設置到Vue上下文環境的$store中。因此在Vue Component任意地方都能夠通過this.$store訪問到該store。
2. 問：state內部支持模塊配置和模塊嵌套，如何實現的？
答：在store構造方法中有makeLocalContext方法，所有module都會有一個local context，根據配置時的path進行匹配。所以執行如dispatch(‘submitOrder’, payload)這類action時，默認的拿到都是module的local state，如果要訪問最外層或者是其他module的state，只能從rootState按照path路徑逐步進行訪問。
3. 問：在執行dispatch觸發action(commit同理)的時候，只需傳入(type, payload)，action執行函數中第一個參數store從哪里獲取的？
答：store初始化時，所有配置的action和mutation以及getters均被封裝過。在執行如dispatch(‘submitOrder’, payload)的時候，actions中type為submitOrder的所有處理方法都是被封裝后的，其第一個參數為當前的store對象，所以能夠獲取到 { dispatch, commit, state, rootState } 等數據。
4. 問：Vuex如何區分state是外部直接修改，還是通過mutation方法修改的？
答：Vuex中修改state的唯一渠道就是執行 commit(‘xx’, payload) 方法，其底層通過執行 this._withCommit(fn) 設置_committing標志變量為true，然后才能修改state，修改完畢還需要還原_committing變量。外部修改雖然能夠直接修改state，但是並沒有修改_committing標志位，所以只要watch一下state，state change時判斷是否_committing值為true，即可判斷修改的合法性。
5. 問：調試時的”時空穿梭”功能是如何實現的？
答：devtoolPlugin中提供了此功能。因為dev模式下所有的state change都會被記錄下來，’時空穿梭’ 功能其實就是將當前的state替換為記錄中某個時刻的state狀態，利用 store.replaceState(targetState) 方法將執行this._vm.state = state 實現。
源碼中還有一些工具函數類似registerModule、unregisterModule、hotUpdate、watch以及subscribe等，如有興趣可以打開源碼看看，這里不再細述。