您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)vuex之store的示例分析,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
使用Vuex的時(shí)候,通常會實(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 // 用來存儲用戶定義的所有的actions this._actions = Object.create(null) this._actionSubscribers = [] // 用來存儲用戶定義所有的mutatins this._mutations = Object.create(null) // 用來存儲用戶定義的所有g(shù)etters this._wrappedGetters = Object.create(null) // 用來存儲所有的運(yùn)行時(shí)的 modules this._modules = new ModuleCollection(options) this._modulesNamespaceMap = Object.create(null) // 用來存儲所有對 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的修改都會用_withCommit函數(shù)包裝,保證在同步修改state的過程中this._committing的值始終為true。這樣當(dāng)我們觀測 state的變化時(shí),如果this._committing的值不為true,則能檢查到這個(gè)狀態(tài)修改是有問題的。
關(guān)于“vuex之store的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯(cuò),請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。