深刻學習Vuex
深刻學習Vuex
vuex做爲配合vue使用的數據狀態管理庫，針對解決兄弟組件或多層級組件共享數據狀態的痛點問題來講，很是好用。本文以使用者的角度，結合源碼來學習vuex。其中也參考了許多前輩的文章,參見最後的Referencehtml
Vue加載Vuex（Vue.use(Vuex)）
Vue加載Vuex仍是很簡單的，讓咱們以官方文檔上實例爲切入點來開始認識Vuexvue
import Vue from 'vue'
import Vuex from 'vuex'
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({
modules: {
cart,
products
},
strict: debug,
plugins: debug ? [createLogger()] : []
})
這段代碼咱們再熟悉不過了，就是Vue加載Vuex插件，而後new了一個Vuex實例。
咱們一步一步來看，首先看一下Vue如何加載的Vuex，也就是Vue.use(Vuex)發生了什麼。react
Vue.use = function (plugin: Function | Object) {
/* istanbul ignore if */
/*標識位檢測該插件是否已經被安裝*/
if (plugin.installed) {
return
}
// additional parameters
const args = toArray(arguments, 1)
/*將this(Vue構造函數)加入數組頭部*/
args.unshift(this)
if (typeof plugin.install === 'function') {
/*install執行插件安裝*/
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
//標記插件已安裝
plugin.installed = true
return this
}
主要作了幾件事：git
- 驗證是否已安裝，避免重複
- 若是插件提供install方法，則執行不然把插件看成function執行
- 最後標記插件已安裝
那麼Vuex提供install方法了嗎？答案是確定的github
let Vue // bind on install
export function install (_Vue) {
if (Vue) {
/*避免重複安裝（Vue.use內部也會檢測一次是否重複安裝同一個插件）*/
if (process.env.NODE_ENV !== 'production') {
console.error(
'[vuex] already installed. Vue.use(Vuex) should be called only once.'
)
}
return
}
/*保存Vue，同時用於檢測是否重複安裝*/
Vue = _Vue//Vue構造函數
/*將vuexInit混淆進Vue的beforeCreate(Vue2.0)或_init方法(Vue1.0)*/
applyMixin(Vue)
}
看mixin以前咱們能夠先思考一個問題，咱們在訪問Vuex的數據的時候基本都是這樣訪問的，好比this.user = this.$store.state.global.user,this.$store是何時加到Vue實例上的？applyMixin會給出答案，讓咱們繼續看applyMixin發生了什麼web
// applyMixin：
export default function (Vue) {
/*獲取Vue版本，鑑別Vue1.0仍是Vue2.0*/
const version = Number(Vue.version.split('.')[0])
if (version >= 2) {
/*經過mixin將vuexInit混淆到Vue實例的beforeCreate鉤子中*/
Vue.mixin({ beforeCreate: vuexInit })
} else {
// override init and inject vuex init procedure
// for 1.x backwards compatibility.
/*將vuexInit放入_init中調用*/
const _init = Vue.prototype._init
Vue.prototype._init = function (options = {}) {
options.init = options.init
? [vuexInit].concat(options.init)
: vuexInit
_init.call(this, options)
}
}
/**
* Vuex init hook, injected into each instances init hooks list.
*/
/*Vuex的init鉤子，會存入每個Vue實例等鉤子列表*/
function vuexInit () {
// this = vue object
const options = this.$options
// store injection
if (options.store) {
/*存在store其實表明的就是Root節點，直接執行store（function時）或者使用store（非function）*/
this.$store = typeof options.store === 'function'
? options.store()
: options.store
} else if (options.parent && options.parent.$store) {
/*子組件直接從父組件中獲取$store，這樣就保證了全部組件都公用了全局的同一份store*/
this.$store = options.parent.$store
}
}
}
咱們這裏就只看2.0了，思路就是經過Vue.mixin把掛載$store的動做放在beforeCreate鉤子上，由此實現了每一個組件實例均可以經過this.$store來直接訪問數據。
注意：mixin的細節vuex
- 同名鉤子函數將混合爲一個數組，所以都將被調用。另外，混入對象的鉤子將在組件自身鉤子以前調用。
- 使用全局混入對象，將會影響到 全部 以後建立的 Vue 實例。
至此，Vue.use(Vuex)咱們已經瞭解完了。api
Vuex結構總覽
順着咱們實例代碼的思路，接下來咱們應該開始看構造器了，不過開始看以前，咱們先看一下Vuex.store Class都定義了些什麼。數組
export class Store {
constructor (options = {}) {
}
// state 取值函數（getter）
get state () {
}
//存值函數（setter）
set state (v) {
}
/* 調用mutation的commit方法 */
commit (_type, _payload, _options) {
}
/* 調用action的dispatch方法 */
dispatch (_type, _payload) {
}
/* 註冊一個訂閱函數，返回取消訂閱的函數 */
subscribe (fn) {
}
/* 觀察一個getter方法 */
watch (getter, cb, options) {
}
/* 重置state */
replaceState (state) {
}
/* 註冊一個動態module，當業務進行異步加載的時候，能夠經過該接口進行註冊動態module */
registerModule (path, rawModule) {
}
/* 註銷一個動態module */
unregisterModule (path) {
}
/* 熱更新 */
hotUpdate (newOptions) {
}
/* 保證經過mutation修改store的數據 */
// 內部使用，好比當外部強行改變state的數據時直接報錯
_withCommit (fn) {
}
}
以上就是定義的接口了，官方文檔上實例屬性和方法都在這裏找獲得。
來看一張大神畫的圖有助於理解思路瀏覽器
出處見最後。
接下來咱們繼續實例思路
export default new Vuex.Store({
modules: {
cart,
products
},
strict: debug,
plugins: debug ? [createLogger()] : []
})
來看一下構造函數
constructor (options = {}) {
// Auto install if it is not done yet and `window` has `Vue`.
// To allow users to avoid auto-installation in some cases,
// this code should be placed here. See #731
/*
在瀏覽器環境下，若是插件還未安裝（!Vue即判斷是否未安裝），則它會自動安裝。
它容許用戶在某些狀況下避免自動安裝。
*/
if (!Vue && typeof window !== 'undefined' && window.Vue) {
install(window.Vue) // 將store註冊到實例或conponent
}
if (process.env.NODE_ENV !== 'production') {
assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)
//檢查是否是new 操做符調用的
assert(this instanceof Store, `Store must be called with the new operator.`)
}
const {
/*一個數組，包含應用在 store 上的插件方法。這些插件直接接收 store 做爲惟一參數，能夠監聽 mutation（用於外部地數據持久化、記錄或調試）或者提交 mutation （用於內部數據，例如 websocket 或 某些觀察者）*/
plugins = [],
/*使 Vuex store 進入嚴格模式，在嚴格模式下，任何 mutation 處理函數之外修改 Vuex state 都會拋出錯誤。*/
strict = false
} = options
/*從option中取出state，若是state是function則執行，最終獲得一個對象*/
let {
state = {}
} = options
if (typeof state === 'function') {
state = state()
}
// store internal state
/* 用來判斷嚴格模式下是不是用mutation修改state的 */
this._committing = false
/* 存放action */
this._actions = Object.create(null)
/* 存放mutation */
this._mutations = Object.create(null)
/* 存放getter */
//包裝後的getter
this._wrappedGetters = Object.create(null)
/* module收集器 */
this._modules = new ModuleCollection(options)
/* 根據namespace存放module */
this._modulesNamespaceMap = Object.create(null)
/* 存放訂閱者 外部插件使用 */
this._subscribers = []
/* 用以實現Watch的Vue實例 */
this._watcherVM = new Vue()
// bind commit and dispatch to self
/*將dispatch與commit調用的this綁定爲store對象自己，不然在組件內部this.dispatch時的this會指向組件的vm*/
const store = this
const {dispatch, commit} = this
/* 爲dispatch與commit綁定this（Store實例自己） */
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)
}
// strict mode
/*嚴格模式(使 Vuex store 進入嚴格模式，在嚴格模式下，任何 mutation 處理函數之外修改 Vuex state 都會拋出錯誤)*/
this.strict = strict
// init root module.
// this also recursively registers all sub-modules
// and collects all module getters inside this._wrappedGetters
/*初始化根module，這也同時遞歸註冊了全部子modle，收集全部module的getter到_wrappedGetters中去，this._modules.root表明根module才獨有保存的Module對象*/
installModule(this, state, [], this._modules.root)
// initialize the store vm, which is responsible for the reactivity
// (also registers _wrappedGetters as computed properties)
/* 經過vm重設store，新建Vue對象使用Vue內部的響應式實現註冊state以及computed */
resetStoreVM(this, state)
// apply plugins
/* 調用插件 */
plugins.forEach(plugin => plugin(this))
/* devtool插件 */
if (Vue.config.devtools) {
devtoolPlugin(this)
}
}
Vuex的源碼一共就一千行左右，構造函數吃透基本掌握至少一半了，構造函數中主要是初始化各類屬性。簡單的詳見註釋，這裏咱們主要看如何解析處理modules，首先來看this._modules = new ModuleCollection(options),ModuleCollection結構以下
import Module from './module'
import { assert, forEachValue } from '../util'
/*module收集類*/
export default class ModuleCollection {
constructor (rawRootModule) { // new store(options)
// register root module (Vuex.Store options)
this.register([], rawRootModule, false)
}
/*獲取父級module*/
get (path) {
}
/*
獲取namespace，當namespaced爲true的時候會返回'moduleName/name'
默認狀況下，模塊內部的 action、mutation 和 getter 是註冊在全局命名空間的——這樣使得多個模塊可以對同一 mutation 或 action 做出響應。
若是但願你的模塊更加自包含或提升可重用性，你能夠經過添加 namespaced: true 的方式使其成爲命名空間模塊。
當模塊被註冊後，它的全部 getter、action 及 mutation 都會自動根據模塊註冊的路徑調整命名。
*/
getNamespace (path) {
}
update (rawRootModule) {
}
/*註冊*/
register (path, rawModule, runtime = true) {
if (process.env.NODE_ENV !== 'production') {
assertRawModule(path, rawModule)
}
/*新建一個Module對象*/
const newModule = new Module(rawModule, runtime)
if (path.length === 0) {
/*path爲空數組的表明跟節點*/
this.root = newModule
} else {
/*獲取父級module*/
const parent = this.get(path.slice(0, -1))//排除倒數第一個元素的數組，
/*在父module中插入一個子module*/
parent.addChild(path[path.length - 1], newModule)
}
// register nested modules
/*遞歸註冊module*/
if (rawModule.modules) {
forEachValue(rawModule.modules, (rawChildModule, key) => {
// concat不改變源數組，返回合併後的數組
this.register(path.concat(key), rawChildModule, runtime)
})
}
}
/*註銷*/
unregister (path) {
}
}
/*Module構造類*/
export default class Module {
constructor (rawModule, runtime) {
this.runtime = runtime
this._children = Object.create(null)
/*保存module*/
this._rawModule = rawModule
/*保存modele的state*/
const rawState = rawModule.state
this.state = (typeof rawState === 'function' ? rawState() : rawState) || {}
}
/* 獲取namespace */
get namespaced () {
}
/*插入一個子module，存入_children中*/
addChild (key, module) {
this._children[key] = module
}
/*移除一個子module*/
removeChild (key) {
}
/*根據key獲取子module*/
getChild (key) {
return this._children[key]
}
/* 更新module */
update (rawModule) {
}
/* 遍歷child */
forEachChild (fn) {
}
/* 遍歷getter */
forEachGetter (fn) {
}
/* 遍歷action */
forEachAction (fn) {
}
/* 遍歷matation */
forEachMutation (fn) {
}
}
ModuleCollection的做用就是收集和管理Module，構造函數中對咱們傳入的options的module進行了註冊（register 是重點，詳見註釋，註冊方法中使用了遞歸，以此來註冊全部的module）。咱們給出的實例通過ModuleCollection的收集以後變成了什麼樣子呢？
//this._modules簡單結構示例
{
root: {
state: {},
_children: {
cart: {
...
},
products: {
...
}
}
}
}
收集完了以後，咱們看一下是如何初始化這些module的installModule(this, state, [], this._modules.root)
function installModule (store, rootState, path, module, hot) {
/* 是不是根module */
const isRoot = !path.length
/* 獲取module的namespace */
const namespace = store._modules.getNamespace(path)
// register in namespace map
/* 若是有namespace則在_modulesNamespaceMap中註冊 */
if (module.namespaced) {
store._modulesNamespaceMap[namespace] = module
}
// set state
if (!isRoot && !hot) {
/* 獲取父級的state */
const parentState = getNestedState(rootState, path.slice(0, -1))//深度取值，並返回取到的值
/* module的name */
const moduleName = path[path.length - 1]
store._withCommit(() => {// 添加響應式屬性
/* 將子module設置稱響應式的 */
Vue.set(parentState, moduleName, module.state)
})
}
// 當前模塊上下文信息
const local = module.context = makeLocalContext(store, namespace, path)
/* 遍歷註冊mutation */
//mutation:key對應的handler
module.forEachMutation((mutation, key) => {
const namespacedType = namespace + key
registerMutation(store, namespacedType, mutation, local)
})
/* 遍歷註冊action */
module.forEachAction((action, key) => {
const namespacedType = namespace + key
registerAction(store, namespacedType, action, local)
})
/* 遍歷註冊getter */
module.forEachGetter((getter, key) => {
const namespacedType = namespace + key
registerGetter(store, namespacedType, getter, local)
})
/* 遞歸安裝mudule */
module.forEachChild((child, key) => {
installModule(store, rootState, path.concat(key), child, hot)
})
}
在這裏構造了各個module的信息也就是localConext,包括各個模塊的mutation,action ,getter ,mudule ,其中運用到了許多包裝的技巧（主要爲了計算模塊的路徑），還有代理的方式訪問數據,詳見註釋
resetStoreVM方法思路就是藉助Vue響應式來實現Vuex的響應式
/* 經過vm重設store，新建Vue對象使用Vue內部的響應式實現註冊state以及computed */
function resetStoreVM (store, state, hot) {
/* 存放以前的vm對象 */
const oldVm = store._vm
// bind store public getters
store.getters = {}
const wrappedGetters = store._wrappedGetters
const computed = {}
/* 經過Object.defineProperty爲每個getter方法設置get方法，好比獲取this.$store.getters.test的時候獲取的是store._vm.test，也就是Vue對象的computed屬性 */
// key = wrappedGetters的key，fn = wrappedGetters的key對應的value
forEachValue(wrappedGetters, (fn, key) => {
// use computed to leverage its lazy-caching mechanism
computed[key] = () => fn(store)
// store.getter並無像state同樣在class直接註冊了getter，setter，而是在這裏定義的
// 用過代理的方式藉助Vue計算屬性實現了Vuex的計算屬性
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.config.silent暫時設置爲true的目的是在new一個Vue實例的過程當中不會報出一切警告 */
Vue.config.silent = true
/* 這裏new了一個Vue對象，運用Vue內部的響應式實現註冊state以及computed*/
//經過Vue的數據劫持，創造了dep,在Vue實例中使用的話Watcher會收集依賴，以達到響應式的目的
store._vm = new Vue({
data: {
$$state: state
},
computed
})
Vue.config.silent = silent
// enable strict mode for new vm
/* 使能嚴格模式，保證修改store只能經過mutation */
if (store.strict) {
enableStrictMode(store)
}
if (oldVm) {
/* 解除舊vm的state的引用，以及銷燬舊的Vue對象 */
if (hot) {
// dispatch changes in all subscribed watchers
// to force getter re-evaluation for hot reloading.
store._withCommit(() => {
oldVm._data.$$state = null
})
}
Vue.nextTick(() => oldVm.$destroy())
}
}
在這裏只要是把Vuex也構造爲響應式的，store._vm指向一個Vue的實例，藉助Vue數據劫持，創造了dep,在組件實例中使用的話Watcher會收集依賴，以達到響應式的目的。
至此，構造函數部分已通過了一遍了。
最後
本文主要是學習了Vuex的初始化部分，實際的Vuex的api接口的實現也有相關的中文註釋，我已經把主要部分中文註釋代碼放在這裏，需者自取中文註釋代碼
學習過程當中參考了許多大神的文章，一併感謝。
Reference
Vue.js 源碼解析（參考了大神的許多註釋，大神寫的太詳盡了，我只補充了一部分）
Vuex框架原理與源碼分析
相關文章
- 1. vuex 深刻學習
- 2. 【vue-進階】之深刻學習Vuex
- 3. vuex 深刻實踐
- 4. vuex 深刻理解
- 5. vuex 源碼：深刻 vuex 之 module
- 6. vuex 源碼：深刻 vuex 之 namespaced
- 7. vuex 源碼：深刻 vuex 之 state
- 8. 深刻vuex原理(下)
- 9. 深刻Vuex最佳實踐
- 10. 深刻vuex原理(上)
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. vuex 深刻學習
- 2. 【vue-進階】之深刻學習Vuex
- 3. vuex 深刻實踐
- 4. vuex 深刻理解
- 5. vuex 源碼：深刻 vuex 之 module
- 6. vuex 源碼：深刻 vuex 之 namespaced
- 7. vuex 源碼：深刻 vuex 之 state
- 8. 深刻vuex原理(下)
- 9. 深刻Vuex最佳實踐
- 10. 深刻vuex原理(上)