詳解vuex之store源碼簡單解析
關(guān)于vuex的基礎(chǔ)部分學(xué)習(xí)于http://www.dbjr.com.cn/article/163008.htm
使用Vuex的時(shí)候,通常會(huì)實(shí)例化Store類,然后傳入一個(gè)對象,包括我們定義好的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),作用是保證對 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ǔ)所有對 mutation 變化的訂閱者 this._subscribers = [] // 一個(gè) Vue對象的實(shí)例,主要是利用 Vue 實(shí)例方法 $watch 來觀測變化的 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傳入的各種屬性模塊注冊和安裝; // resetStoreVM 方法是初始化 store._vm,觀測 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è)大對象內(nèi),隨著我們應(yīng)用規(guī)模的不斷增長,這個(gè)Store變得非常臃腫。為了解決這個(gè)問題,Vuex允許我們把store分模塊。每一個(gè)模塊包含各自的state、mutations、actions和getters,甚至還可以嵌套模塊。
接下來看installModule方法:
function installModule (store, rootState, path, module, hot) { // 通過path數(shù)組的長度判斷是否為根 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) // 對mutations、actions、getters進(jìn)行注冊 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中所有對state的修改都會(huì)用_withCommit函數(shù)包裝,保證在同步修改state的過程中this._committing的值始終為true。這樣當(dāng)我們觀測 state的變化時(shí),如果this._committing的值不為true,則能檢查到這個(gè)狀態(tài)修改是有問題的。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
前端elementUI?select選擇器實(shí)現(xiàn)遠(yuǎn)程搜索
這篇文章主要為大家介紹了前端使用elementUI?select選擇器實(shí)現(xiàn)遠(yuǎn)程搜索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05vue 中directive功能的簡單實(shí)現(xiàn)
本篇介紹directive的簡單實(shí)現(xiàn),主要學(xué)習(xí)其實(shí)現(xiàn)的思路及代碼的設(shè)計(jì),需要的朋友參考下吧2018-01-01vue項(xiàng)目中請求數(shù)據(jù)特別多導(dǎo)致頁面卡死的解決
這篇文章主要介紹了vue項(xiàng)目中請求數(shù)據(jù)特別多導(dǎo)致頁面卡死的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Vue項(xiàng)目打包問題詳解(生產(chǎn)環(huán)境樣式失效)
在Vue開發(fā)過程中,項(xiàng)目的打包是一個(gè)非常重要的步驟,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包問題(生產(chǎn)環(huán)境樣式失效)的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12vue2模擬vue-element-admin手寫角色權(quán)限的實(shí)現(xiàn)
本文主要介紹了vue2模擬vue-element-admin手寫角色權(quán)限的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07Vue循環(huán)遍歷選項(xiàng)賦值到對應(yīng)控件的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue-循環(huán)遍歷選項(xiàng)賦值到對應(yīng)控件的實(shí)現(xiàn)方法啊,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題
這篇文章主要介紹了vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07Vue中mintui的field實(shí)現(xiàn)blur和focus事件的方法
今天小編就為大家分享一篇Vue中mintui的field實(shí)現(xiàn)blur和focus事件的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08解決vue項(xiàng)目中出現(xiàn)Invalid Host header的問題
這篇文章主要介紹了解決vue項(xiàng)目中出現(xiàn)"Invalid Host header"的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11