Vuex入門之Module使用詳解
一、Module引入
由于使用單一狀態(tài)樹，應用的所有狀態(tài)會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。
為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割：
const moduleA = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)二、模塊的局部狀態(tài)
對于模塊內(nèi)部的 mutation 和 getter，接收的第一個參數(shù)是模塊的局部狀態(tài)對象。
const moduleA = {
state: () => ({
count: 0
}),
mutations: {
add(state) {
// 這里的 `state` 對象是模塊的局部狀態(tài)
state.count++
}
},
getters: {
doubleCount (state) {
return state.count * 2
}
}
}同樣，對于模塊內(nèi)部的 action，局部狀態(tài)通過 context.state 暴露出來，根節(jié)點狀態(tài)則為 context.rootState：
const moduleA = {
actions: {
incrementIfOddOnRootSum ({ state, commit, rootState }) {
if ((state.count + rootState.count) % 2 === 1) {
commit('add')
}
}
}
}
對于模塊內(nèi)部的 getter，根節(jié)點狀態(tài)會作為第三個參數(shù)暴露出來：
const moduleA = {
// ...
getters: {
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
}
}
}
三、命名空間
默認情況下，模塊內(nèi)部的 action、mutation 和 getter 是注冊在全局命名空間的——這樣使得多個模塊能夠?qū)ν?mutation 或 action 作出響應。
如果希望你的模塊具有更高的封裝度和復用性，你可以通過添加 namespaced: true 的方式使其成為帶命名空間的模塊。當模塊被注冊后，它的所有 getter、action 及 mutation 都會自動根據(jù)模塊注冊的路徑調(diào)整命名。例如：
const moduleA = {
// ...
getters: {
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
}
}
}
啟用了命名空間的 getter 和 action 會收到局部化的 getter，dispatch 和 commit 。換言之，你在使用模塊內(nèi)容（module assets）時不需要在同一模塊內(nèi)額外添加空間名前綴。更改 namespaced 屬性后不需要修改模塊內(nèi)的代碼。
1、在帶命名空間的模塊內(nèi)訪問全局內(nèi)容（Global Assets）
如果你希望使用全局 state 和 getter，rootState 和 rootGetters 會作為第三和第四參數(shù)傳入 getter，也會通過 context 對象的屬性傳入 action。
若需要在全局命名空間內(nèi)分發(fā) action 或提交 mutation，將 { root: true }作為第三參數(shù)傳給 dispatch 或 commit 即可。
modules: {
foo: {
namespaced: true,
getters: {
// 在這個模塊的 getter 中，`getters` 被局部化了
// 你可以使用 getter 的第四個參數(shù)來調(diào)用 `rootGetters`
someGetter (state, getters, rootState, rootGetters) {
getters.someOtherGetter // -> 'foo/someOtherGetter'
rootGetters.someOtherGetter // -> 'someOtherGetter'
},
someOtherGetter: state => { ... }
},
actions: {
// 在這個模塊中， dispatch 和 commit 也被局部化了
// 他們可以接受 `root` 屬性以訪問根 dispatch 或 commit
someAction ({ dispatch, commit, getters, rootGetters }) {
getters.someGetter // -> 'foo/someGetter'
rootGetters.someGetter // -> 'someGetter'
dispatch('someOtherAction') // -> 'foo/someOtherAction'
dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'
commit('someMutation') // -> 'foo/someMutation'
commit('someMutation', null, { root: true }) // -> 'someMutation'
},
someOtherAction (ctx, payload) { ... }
}
}
}
2、在帶命名空間的模塊注冊全局 action
若需要在帶命名空間的模塊注冊全局 action，你可添加 root: true，并將這個 action 的定義放在函數(shù) handler 中。例如：
{
actions: {
someOtherAction ({dispatch}) {
dispatch('someAction')
}
},
modules: {
foo: {
namespaced: true,
actions: {
someAction: {
root: true,
handler (namespacedContext, payload) { ... } // -> 'someAction'
}
}
}
}
}
3、帶命名空間的綁定函數(shù)
當使用 mapState, mapGetters, mapActions 和 mapMutations 這些函數(shù)來綁定帶命名空間的模塊時，寫起來可能比較繁瑣：
computed: {
...mapState({
a: state => state.some.nested.module.a,
b: state => state.some.nested.module.b
})
},
methods: {
...mapActions([
'some/nested/module/foo', // -> this['some/nested/module/foo']()
'some/nested/module/bar' // -> this['some/nested/module/bar']()
])
}
對于這種情況，你可以將模塊的空間名稱字符串作為第一個參數(shù)傳遞給上述函數(shù)，這樣所有綁定都會自動將該模塊作為上下文。于是上面的例子可以簡化為：
computed: {
...mapState('some/nested/module', {
a: state => state.a,
b: state => state.b
})
},
methods: {
...mapActions('some/nested/module', [
'foo', // -> this.foo()
'bar' // -> this.bar()
])
}
而且，你可以通過使用 createNamespacedHelpers 創(chuàng)建基于某個命名空間輔助函數(shù)。它返回一個對象，對象里有新的綁定在給定命名空間值上的組件綁定輔助函數(shù)：
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')
export default {
computed: {
// 在 `some/nested/module` 中查找
...mapState({
a: state => state.a,
b: state => state.b
})
},
methods: {
// 在 `some/nested/module` 中查找
...mapActions([
'foo',
'bar'
])
}
}
四、模塊動態(tài)注冊
在 store 創(chuàng)建之后，你可以使用 store.registerModule 方法注冊模塊：
import Vuex from 'vuex'
const store = new Vuex.Store({ /* 選項 */ })
// 注冊模塊 `myModule`
store.registerModule('myModule', {
// ...
})
// 注冊嵌套模塊 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
// ...
})
之后就可以通過 store.state.myModule 和 store.state.nested.myModule 訪問模塊的狀態(tài)。
模塊動態(tài)注冊功能使得其他 Vue 插件可以通過在 store 中附加新模塊的方式來使用 Vuex 管理狀態(tài)。例如，vuex-router-sync 插件就是通過動態(tài)注冊模塊將 vue-router 和 vuex 結(jié)合在一起，實現(xiàn)應用的路由狀態(tài)管理。
你也可以使用 store.unregisterModule(moduleName) 來動態(tài)卸載模塊。注意，你不能使用此方法卸載靜態(tài)模塊（即創(chuàng)建 store 時聲明的模塊）。
注意，你可以通過 store.hasModule(moduleName) 方法檢查該模塊是否已經(jīng)被注冊到 store。
五、保留 state
在注冊一個新 module 時，你很有可能想保留過去的 state，例如從一個服務端渲染的應用保留 state。
你可以通過 preserveState 選項將其歸檔：store.registerModule('a', module, { preserveState: true })。
當你設置 preserveState: true 時，該模塊會被注冊，action、mutation 和 getter 會被添加到 store 中，但是 state 不會。
這里假設 store 的 state 已經(jīng)包含了這個 module 的 state 并且你不希望將其覆寫。
六、模塊重用
有時我們可能需要創(chuàng)建一個模塊的多個實例，例如：
創(chuàng)建多個 store，他們公用同一個模塊 (例如當 runInNewContext 選項是 false 或 'once' 時，為了在服務端渲染中避免有狀態(tài)的單例) 在一個 store 中多次注冊同一個模塊 如果我們使用一個純對象來聲明模塊的狀態(tài)，那么這個狀態(tài)對象會通過引用被共享，導致狀態(tài)對象被修改時 store 或模塊間數(shù)據(jù)互相污染的問題。
實際上這和 Vue 組件內(nèi)的 data 是同樣的問題。因此解決辦法也是相同的——使用一個函數(shù)來聲明模塊狀態(tài)（僅 2.3.0+ 支持）：
const MyReusableModule = {
state: () => ({
foo: 'bar'
}),
// mutation, action 和 getter 等等...
}
到此這篇關(guān)于Vuex入門之Module使用詳解的文章就介紹到這了,更多相關(guān)Vuex的Module使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文介紹了如何在Vue3項目中集成Vditor Markdown編輯器,包括Vditor的簡介、安裝、預覽、編輯以及一些高級功能和常見問題解決,Vditor支持多種編輯模式、圖表、公式等,且高度可定制化2025-10-10
這篇文章主要為大家學習介紹了如何利用Vue2實現(xiàn)全局水印的效果，文中的示例代碼簡潔易懂，具有一定的借鑒價值，感興趣的小伙伴可以了解下2023-07-07
這篇文章主要介紹了詳解vue3.0 diff算法的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了安裝多版本Vue-CLI的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
本文主要介紹了elementui彈窗頁按鈕重復提交問題解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-08-08
在 Vue.js 中,組件的重復渲染是一個常見的問題,可能會影響應用的性能和用戶體驗,為了提升應用的性能,開發(fā)者需要理解 Vue 的渲染機制,并應用有效的方法來避免不必要的組件重渲染,本文將深入探討如何防止 Vue 組件重復渲染,并提供相關(guān)示例代碼,需要的朋友可以參考下2024-10-10
vue3動態(tài)路由刷新出現(xiàn)空白頁的原因與最優(yōu)解
頁面刷新白屏其實是因為vuex引起的,由于刷新頁面vuex數(shù)據(jù)會丟失,這篇文章主要給大家介紹了關(guān)于vue3動態(tài)路由刷新出現(xiàn)空白頁的原因與最優(yōu)解的相關(guān)資料,需要的朋友可以參考下2023-11-11
本文通過實例代碼給大家介紹了Vue創(chuàng)建頭部組件的相關(guān)知識，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示
這篇文章主要為大家詳細介紹了vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了vue中的for循環(huán)以及自定義指令，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08