Vuex入門之Module使用詳解
一、Module引入
由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會集中到一個比較大的對象。當應(yīng)用變得非常復(fù)雜時，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 作出響應(yīng)。
如果希望你的模塊具有更高的封裝度和復(fù)用性，你可以通過添加 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)應(yīng)用的路由狀態(tài)管理。
你也可以使用 store.unregisterModule(moduleName) 來動態(tài)卸載模塊。注意，你不能使用此方法卸載靜態(tài)模塊（即創(chuàng)建 store 時聲明的模塊）。
注意，你可以通過 store.hasModule(moduleName) 方法檢查該模塊是否已經(jīng)被注冊到 store。
五、保留 state
在注冊一個新 module 時，你很有可能想保留過去的 state，例如從一個服務(wù)端渲染的應(yīng)用保留 state。
你可以通過 preserveState 選項將其歸檔：store.registerModule('a', module, { preserveState: true })。
當你設(shè)置 preserveState: true 時，該模塊會被注冊，action、mutation 和 getter 會被添加到 store 中，但是 state 不會。
這里假設(shè) store 的 state 已經(jīng)包含了這個 module 的 state 并且你不希望將其覆寫。
六、模塊重用
有時我們可能需要創(chuàng)建一個模塊的多個實例，例如：
創(chuàng)建多個 store，他們公用同一個模塊 (例如當 runInNewContext 選項是 false 或 'once' 時，為了在服務(wù)端渲染中避免有狀態(tài)的單例) 在一個 store 中多次注冊同一個模塊 如果我們使用一個純對象來聲明模塊的狀態(tài)，那么這個狀態(tài)對象會通過引用被共享，導(dǎo)致狀態(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)文章
swiper是我之前做前端頁面會用到的一個插件,我自己認為是非常好用的。這篇文章給大家介紹vue-swiper的使用教程，感興趣的朋友一起看看吧2018-08-08
這篇文章主要介紹了vue3在router中使用store報錯解決方案,就是需要在實例化一下,因為在編譯router的時候pinia還未被實例化,文中補充介紹了vue3中router和store詳細使用教程方法,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了基于vue的tab-list類目切換商品列表組件的示例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
利用webstrom調(diào)試Vue.js單頁面程序的方法教程
這篇文章主要給大家介紹了利用webstrom調(diào)試Vue.js單頁面程序的方法教程，文中介紹的非常詳細，對大家具有一定的參考學(xué)習價值，需要的朋友們下面跟著小編一起來學(xué)習學(xué)習吧。2017-06-06
這篇文章主要介紹了詳解vue 自定義組件使用v-model 及探究其中原理，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-10-10
大家都經(jīng)常使用美團app買電影票，很多朋友不知道她的功能是怎么實現(xiàn)的，作為我程序員一枚對它的算法很好奇，今天小編就把基于Vue實現(xiàn)美團app的影院推薦選座功能分享到腳本之家平臺，感興趣的朋友一起看看吧2018-08-08
使用VUE3開發(fā)很久了,但一直沒進行總結(jié)和記錄,忙里偷閑整理搭建一套VUE3項目腳手架,下面這篇文章主要給大家介紹了關(guān)于Vue3項目搭建的詳細過程,需要的朋友可以參考下2022-10-10
vue-router2.0 組件之間傳參及獲取動態(tài)參數(shù)的方法
下面小編就為大家?guī)硪黄獀ue-router2.0 組件之間傳參及獲取動態(tài)參數(shù)的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
uni-app提供了異步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2個API獲取系統(tǒng)信息，系統(tǒng)信息返回的內(nèi)容非常多，各操作系統(tǒng)、各家小程序、各瀏覽器對它們的定義也不相同2022-11-11
這篇文章主要介紹了Vue如何引用public中的js文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09