詳解vuex之store源碼簡(jiǎn)單解析
關(guān)于vuex的基礎(chǔ)部分學(xué)習(xí)于http://www.dhdzp.com/article/163008.htm
使用Vuex的時(shí)候,通常會(huì)實(shí)例化Store類,然后傳入一個(gè)對(duì)象,包括我們定義好的actions、getters、mutations、state等。store的構(gòu)造函數(shù):
export class Store {
constructor (options = {}) {
// 若window內(nèi)不存在vue,則重新定義Vue
if (!Vue && typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
if (process.env.NODE_ENV !== 'production') {
// 斷言函數(shù),來判斷是否滿足一些條件
// 確保 Vue 的存在
assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
// 確保 Promsie 可以使用
assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)
assert(this instanceof Store, `store must be called with the new operator.`)
}
// 解構(gòu)賦值,拿到options里的plugins和strict
const {
plugins = [],
strict = false
} = options
// 創(chuàng)建內(nèi)部屬性
// 標(biāo)志一個(gè)提交狀態(tài),作用是保證對(duì) Vuex 中 state 的修改只能在 mutation 的回調(diào)函數(shù)中,而不能在外部隨意修改 state
this._committing = false
// 用來存儲(chǔ)用戶定義的所有的actions
this._actions = Object.create(null)
this._actionSubscribers = []
// 用來存儲(chǔ)用戶定義所有的mutatins
this._mutations = Object.create(null)
// 用來存儲(chǔ)用戶定義的所有g(shù)etters
this._wrappedGetters = Object.create(null)
// 用來存儲(chǔ)所有的運(yùn)行時(shí)的 modules
this._modules = new ModuleCollection(options)
this._modulesNamespaceMap = Object.create(null)
// 用來存儲(chǔ)所有對(duì) mutation 變化的訂閱者
this._subscribers = []
// 一個(gè) Vue對(duì)象的實(shí)例,主要是利用 Vue 實(shí)例方法 $watch 來觀測(cè)變化的
this._watcherVM = new Vue()
// 把Store類的dispatch和commit的方法的this指針指向當(dāng)前store的實(shí)例上
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)
}
// 是否開啟嚴(yán)格模式
this.strict = strict
const state = this._modules.root.state
// Vuex的初始化的核心,其中,installModule方法是把我們通過options傳入的各種屬性模塊注冊(cè)和安裝;
// resetStoreVM 方法是初始化 store._vm,觀測(cè) state 和 getters 的變化;最后是應(yīng)用傳入的插件。
installModule(this, state, [], this._modules.root)
resetStoreVM(this, state)
plugins.forEach(plugin => plugin(this))
const useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools
if (useDevtools) {
devtoolPlugin(this)
}
}
Vuex本身是單一狀態(tài)樹,應(yīng)用的所有狀態(tài)都包含在一個(gè)大對(duì)象內(nèi),隨著我們應(yīng)用規(guī)模的不斷增長(zhǎng),這個(gè)Store變得非常臃腫。為了解決這個(gè)問題,Vuex允許我們把store分模塊。每一個(gè)模塊包含各自的state、mutations、actions和getters,甚至還可以嵌套模塊。
接下來看installModule方法:
function installModule (store, rootState, path, module, hot) {
// 通過path數(shù)組的長(zhǎng)度判斷是否為根
const isRoot = !path.length
const namespace = store._modules.getNamespace(path)
// register in namespace map
if (module.namespaced) {
store._modulesNamespaceMap[namespace] = module
}
// 第一次調(diào)用時(shí),path為空,不進(jìn)入if
// 遞歸調(diào)用installModule安裝子模塊時(shí),將執(zhí)行該代碼塊
if (!isRoot && !hot) {
const parentState = getNestedState(rootState, path.slice(0, -1))
// 模塊名
const moduleName = path[path.length - 1]
// 把當(dāng)前模塊的state添加到parentState中。具體解析見下
store._withCommit(() => {
Vue.set(parentState, moduleName, module.state)
})
}
const local = module.context = makeLocalContext(store, namespace, path)
// 對(duì)mutations、actions、getters進(jìn)行注冊(cè)
module.forEachMutation((mutation, key) => {
const namespacedType = namespace + key
registerMutation(store, namespacedType, mutation, local)
})
module.forEachAction((action, key) => {
const type = action.root ? key : namespace + key
const handler = action.handler || action
registerAction(store, type, handler, local)
})
module.forEachGetter((getter, key) => {
const namespacedType = namespace + key
registerGetter(store, namespacedType, getter, local)
})
// 遍歷modules,遞歸調(diào)用installModule安裝子模塊
module.forEachChild((child, key) => {
installModule(store, rootState, path.concat(key), child, hot)
})
}
store的_withCommit方法定義是這樣的:
_withCommit (fn) {
const committing = this._committing
this._committing = true
fn()
this._committing = committing
}
Vuex中所有對(duì)state的修改都會(huì)用_withCommit函數(shù)包裝,保證在同步修改state的過程中this._committing的值始終為true。這樣當(dāng)我們觀測(cè) state的變化時(shí),如果this._committing的值不為true,則能檢查到這個(gè)狀態(tài)修改是有問題的。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
element表單驗(yàn)證如何清除校驗(yàn)提示語
本文主要介紹了element表單驗(yàn)證如何清除校驗(yàn)提示語,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10
vue-cli3項(xiàng)目配置eslint代碼規(guī)范的完整步驟
這篇文章主要給大家介紹了關(guān)于vue-cli3項(xiàng)目配置eslint代碼規(guī)范的完整步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
VueJS實(shí)現(xiàn)用戶管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了VueJS實(shí)現(xiàn)用戶管理系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05
vue element后臺(tái)鑒權(quán)流程分析
這篇文章主要介紹了vue element后臺(tái)鑒權(quán)流程分析,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-04-04
玩轉(zhuǎn)vue的slot內(nèi)容分發(fā)
這篇文章主要介紹了玩轉(zhuǎn)vue的slot內(nèi)容分發(fā),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
vue2如何使用face-api.js實(shí)現(xiàn)人臉識(shí)別功能
本文介紹了如何在Vue.js項(xiàng)目中利用face-api.js實(shí)現(xiàn)人臉識(shí)別功能,首先需要安裝Vue.js和face-api.js以及其依賴TensorFlow.js,接著,下載并配置必要的模型文件到項(xiàng)目目錄,之后,將人臉識(shí)別功能封裝成Vue組件,并在組件中通過視頻流進(jìn)行人臉檢測(cè)和結(jié)果展示2024-09-09

