Vuex入門之Module使用詳解
一、Module引入
由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對(duì)象就有可能變得相當(dāng)臃腫。
為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割：
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)
對(duì)于模塊內(nèi)部的 mutation 和 getter，接收的第一個(gè)參數(shù)是模塊的局部狀態(tài)對(duì)象。
const moduleA = {
state: () => ({
count: 0
}),
mutations: {
add(state) {
// 這里的 `state` 對(duì)象是模塊的局部狀態(tài)
state.count++
}
},
getters: {
doubleCount (state) {
return state.count * 2
}
}
}同樣，對(duì)于模塊內(nèi)部的 action，局部狀態(tài)通過 context.state 暴露出來，根節(jié)點(diǎn)狀態(tài)則為 context.rootState：
const moduleA = {
actions: {
incrementIfOddOnRootSum ({ state, commit, rootState }) {
if ((state.count + rootState.count) % 2 === 1) {
commit('add')
}
}
}
}
對(duì)于模塊內(nèi)部的 getter，根節(jié)點(diǎn)狀態(tài)會(huì)作為第三個(gè)參數(shù)暴露出來：
const moduleA = {
// ...
getters: {
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
}
}
}
三、命名空間
默認(rèn)情況下，模塊內(nèi)部的 action、mutation 和 getter 是注冊(cè)在全局命名空間的——這樣使得多個(gè)模塊能夠?qū)ν?mutation 或 action 作出響應(yīng)。
如果希望你的模塊具有更高的封裝度和復(fù)用性，你可以通過添加 namespaced: true 的方式使其成為帶命名空間的模塊。當(dāng)模塊被注冊(cè)后，它的所有 getter、action 及 mutation 都會(huì)自動(dòng)根據(jù)模塊注冊(cè)的路徑調(diào)整命名。例如：
const moduleA = {
// ...
getters: {
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
}
}
}
啟用了命名空間的 getter 和 action 會(huì)收到局部化的 getter，dispatch 和 commit 。換言之，你在使用模塊內(nèi)容（module assets）時(shí)不需要在同一模塊內(nèi)額外添加空間名前綴。更改 namespaced 屬性后不需要修改模塊內(nèi)的代碼。
1、在帶命名空間的模塊內(nèi)訪問全局內(nèi)容（Global Assets）
如果你希望使用全局 state 和 getter，rootState 和 rootGetters 會(huì)作為第三和第四參數(shù)傳入 getter，也會(huì)通過 context 對(duì)象的屬性傳入 action。
若需要在全局命名空間內(nèi)分發(fā) action 或提交 mutation，將 { root: true }作為第三參數(shù)傳給 dispatch 或 commit 即可。
modules: {
foo: {
namespaced: true,
getters: {
// 在這個(gè)模塊的 getter 中，`getters` 被局部化了
// 你可以使用 getter 的第四個(gè)參數(shù)來調(diào)用 `rootGetters`
someGetter (state, getters, rootState, rootGetters) {
getters.someOtherGetter // -> 'foo/someOtherGetter'
rootGetters.someOtherGetter // -> 'someOtherGetter'
},
someOtherGetter: state => { ... }
},
actions: {
// 在這個(gè)模塊中， 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、在帶命名空間的模塊注冊(cè)全局 action
若需要在帶命名空間的模塊注冊(cè)全局 action，你可添加 root: true，并將這個(gè) action 的定義放在函數(shù) handler 中。例如：
{
actions: {
someOtherAction ({dispatch}) {
dispatch('someAction')
}
},
modules: {
foo: {
namespaced: true,
actions: {
someAction: {
root: true,
handler (namespacedContext, payload) { ... } // -> 'someAction'
}
}
}
}
}
3、帶命名空間的綁定函數(shù)
當(dāng)使用 mapState, mapGetters, mapActions 和 mapMutations 這些函數(shù)來綁定帶命名空間的模塊時(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']()
])
}
對(duì)于這種情況，你可以將模塊的空間名稱字符串作為第一個(gè)參數(shù)傳遞給上述函數(shù)，這樣所有綁定都會(huì)自動(dòng)將該模塊作為上下文。于是上面的例子可以簡化為：
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)建基于某個(gè)命名空間輔助函數(shù)。它返回一個(gè)對(duì)象，對(duì)象里有新的綁定在給定命名空間值上的組件綁定輔助函數(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'
])
}
}
四、模塊動(dòng)態(tài)注冊(cè)
在 store 創(chuàng)建之后，你可以使用 store.registerModule 方法注冊(cè)模塊：
import Vuex from 'vuex'
const store = new Vuex.Store({ /* 選項(xiàng) */ })
// 注冊(cè)模塊 `myModule`
store.registerModule('myModule', {
// ...
})
// 注冊(cè)嵌套模塊 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
// ...
})
之后就可以通過 store.state.myModule 和 store.state.nested.myModule 訪問模塊的狀態(tài)。
模塊動(dòng)態(tài)注冊(cè)功能使得其他 Vue 插件可以通過在 store 中附加新模塊的方式來使用 Vuex 管理狀態(tài)。例如，vuex-router-sync 插件就是通過動(dòng)態(tài)注冊(cè)模塊將 vue-router 和 vuex 結(jié)合在一起，實(shí)現(xiàn)應(yīng)用的路由狀態(tài)管理。
你也可以使用 store.unregisterModule(moduleName) 來動(dòng)態(tài)卸載模塊。注意，你不能使用此方法卸載靜態(tài)模塊（即創(chuàng)建 store 時(shí)聲明的模塊）。
注意，你可以通過 store.hasModule(moduleName) 方法檢查該模塊是否已經(jīng)被注冊(cè)到 store。
五、保留 state
在注冊(cè)一個(gè)新 module 時(shí)，你很有可能想保留過去的 state，例如從一個(gè)服務(wù)端渲染的應(yīng)用保留 state。
你可以通過 preserveState 選項(xiàng)將其歸檔：store.registerModule('a', module, { preserveState: true })。
當(dāng)你設(shè)置 preserveState: true 時(shí)，該模塊會(huì)被注冊(cè)，action、mutation 和 getter 會(huì)被添加到 store 中，但是 state 不會(huì)。
這里假設(shè) store 的 state 已經(jīng)包含了這個(gè) module 的 state 并且你不希望將其覆寫。
六、模塊重用
有時(shí)我們可能需要?jiǎng)?chuàng)建一個(gè)模塊的多個(gè)實(shí)例，例如：
創(chuàng)建多個(gè) store，他們公用同一個(gè)模塊 (例如當(dāng) runInNewContext 選項(xiàng)是 false 或 'once' 時(shí)，為了在服務(wù)端渲染中避免有狀態(tài)的單例) 在一個(gè) store 中多次注冊(cè)同一個(gè)模塊 如果我們使用一個(gè)純對(duì)象來聲明模塊的狀態(tài)，那么這個(gè)狀態(tài)對(duì)象會(huì)通過引用被共享，導(dǎo)致狀態(tài)對(duì)象被修改時(shí) store 或模塊間數(shù)據(jù)互相污染的問題。
實(shí)際上這和 Vue 組件內(nèi)的 data 是同樣的問題。因此解決辦法也是相同的——使用一個(gè)函數(shù)來聲明模塊狀態(tài)（僅 2.3.0+ 支持）：
const MyReusableModule = {
state: () => ({
foo: 'bar'
}),
// mutation, action 和 getter 等等...
}
到此這篇關(guān)于Vuex入門之Module使用詳解的文章就介紹到這了,更多相關(guān)Vuex的Module使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
swiper是我之前做前端頁面會(huì)用到的一個(gè)插件,我自己認(rèn)為是非常好用的。這篇文章給大家介紹vue-swiper的使用教程，感興趣的朋友一起看看吧2018-08-08
vue3在router中使用store報(bào)錯(cuò)的完美解決方案
這篇文章主要介紹了vue3在router中使用store報(bào)錯(cuò)解決方案,就是需要在實(shí)例化一下,因?yàn)樵诰幾grouter的時(shí)候pinia還未被實(shí)例化,文中補(bǔ)充介紹了vue3中router和store詳細(xì)使用教程方法,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了基于vue的tab-list類目切換商品列表組件的示例代碼，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
利用webstrom調(diào)試Vue.js單頁面程序的方法教程
這篇文章主要給大家介紹了利用webstrom調(diào)試Vue.js單頁面程序的方法教程，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
這篇文章主要介紹了詳解vue 自定義組件使用v-model 及探究其中原理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue實(shí)現(xiàn)美團(tuán)app的影院推薦選座功能【推薦】
大家都經(jīng)常使用美團(tuán)app買電影票，很多朋友不知道她的功能是怎么實(shí)現(xiàn)的，作為我程序員一枚對(duì)它的算法很好奇，今天小編就把基于Vue實(shí)現(xiàn)美團(tuán)app的影院推薦選座功能分享到腳本之家平臺(tái)，感興趣的朋友一起看看吧2018-08-08
使用VUE3開發(fā)很久了,但一直沒進(jìn)行總結(jié)和記錄,忙里偷閑整理搭建一套VUE3項(xiàng)目腳手架,下面這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目搭建的詳細(xì)過程,需要的朋友可以參考下2022-10-10
vue-router2.0 組件之間傳參及獲取動(dòng)態(tài)參數(shù)的方法
下面小編就為大家?guī)硪黄獀ue-router2.0 組件之間傳參及獲取動(dòng)態(tài)參數(shù)的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
uni-app提供了異步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2個(gè)API獲取系統(tǒng)信息，系統(tǒng)信息返回的內(nèi)容非常多，各操作系統(tǒng)、各家小程序、各瀏覽器對(duì)它們的定義也不相同2022-11-11
這篇文章主要介紹了Vue如何引用public中的js文件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09