深入理解Vuex 模塊化(module)
一、為什么需要模塊化
前面我們講到的例子都在一個(gè)狀態(tài)樹(shù)里進(jìn)行,當(dāng)一個(gè)項(xiàng)目比較大時(shí),所有的狀態(tài)都集中在一起會(huì)得到一個(gè)比較大的對(duì)象,進(jìn)而顯得臃腫,難以維護(hù)。為了解決這個(gè)問(wèn)題,Vuex允許我們將store分割成模塊(module),每個(gè)module有自己的state,mutation,action,getter,甚至還可以往下嵌套模塊,下面我們看一個(gè)典型的模塊化例子
const moduleA = {
state: {....},
mutations: {....},
actions: {....},
getters: {....}
}
const moduleB = {
state: {....},
mutations: {....},
actions: {....},
getters: {....}
}
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ù)(state)是模塊的局部狀態(tài)對(duì)象,rootState
const moduleA = {
state: { count: 0},
mutations: {
increment (state) {
// state是模塊的局部狀態(tài),也就是上面的state
state.count++
}
},
getters: {
doubleCount (state, getters, rootState) {
// 參數(shù) state為當(dāng)前局部狀態(tài),rootState為根節(jié)點(diǎn)狀態(tài)
return state.count * 2
}
},
actions: {
incremtnIfOddRootSum ( { state, commit, rootState } ) {
// 參數(shù) state為當(dāng)前局部狀態(tài),rootState為根節(jié)點(diǎn)狀態(tài)
if ((state.cont + rootState.count) % 2 === 1) {
commit('increment')
}
}
}
}
三、命名空間(這里一定要看,不然有些時(shí)候會(huì)被坑)
上面所有的例子中,模塊內(nèi)部的action、mutation、getter是注冊(cè)在全局命名空間的,如果你在moduleA和moduleB里分別聲明了命名相同的action或者mutation或者getter(叫some),當(dāng)你使用store.commit('some'),A和B模塊會(huì)同時(shí)響應(yīng)。所以,如果你希望你的模塊更加自包含和提高可重用性,你可以添加namespaced: true的方式,使其成為命名空間模塊。當(dāng)模塊被注冊(cè)后,它的所有g(shù)etter,action,mutation都會(huì)自動(dòng)根據(jù)模塊注冊(cè)的路徑調(diào)用整個(gè)命名,例如:
const store = new Vuex.Store({
modules: {
account: {
namespaced: true,
state: {...}, // 模塊內(nèi)的狀態(tài)已經(jīng)是嵌套的,namespaced不會(huì)有影響
getters: { // 每一條注釋為調(diào)用方法
isAdmin () { ... } // getters['account/isAdmin']
},
actions: {
login () {...} // dispatch('account/login')
},
mutations: {
login () {...} // commit('account/login')
},
modules: { // 繼承父模塊的命名空間
myPage : {
state: {...},
getters: {
profile () {...} // getters['account/profile']
}
},
posts: { // 進(jìn)一步嵌套命名空間
namespaced: true,
getters: {
popular () {...} // getters['account/posts/popular']
}
}
}
}
}
})
啟用了命名空間的getter和action會(huì)收到局部化的getter,dispatch和commit。你在使用模塊內(nèi)容時(shí)不需要再同一模塊內(nèi)添加空間名前綴,更改namespaced屬性后不需要修改模塊內(nèi)的代碼。
四、在命名空間模塊內(nèi)訪問(wèn)全局內(nèi)容(Global Assets)
如果你希望使用全局state和getter,roorState和rootGetter會(huì)作為第三和第四參數(shù)傳入getter,也會(huì)通過(guò)context對(duì)象的屬性傳入action若需要在全局命名空間內(nèi)分發(fā)action或者提交mutation,將{ root: true }作為第三參數(shù)傳給dispatch或commit即可。
modules: {
foo: {
namespaced: true,
getters: {
// 在這個(gè)被命名的模塊里,getters被局部化了
// 你可以使用getter的第四個(gè)參數(shù)來(lái)調(diào)用 'rootGetters'
someGetter (state, getters, rootSate, rootGetters) {
getters.someOtherGetter // -> 局部的getter, ‘foo/someOtherGetter'
rootGetters.someOtherGetter // -> 全局getter, 'someOtherGetter'
}
},
actions: {
// 在這個(gè)模塊里,dispatch和commit也被局部化了
// 他們可以接受root屬性以訪問(wèn)跟dispatch和commit
smoeActino ({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
}
}
}
}
五、帶命名空間的綁定函數(shù)
前面說(shuō)過(guò),帶了命名空間后,調(diào)用時(shí)必須要寫上命名空間,但是這樣就比較繁瑣,尤其涉及到多層嵌套時(shí)(當(dāng)然開(kāi)發(fā)中別嵌套太多,會(huì)暈。。)
下面我們看下一般寫法
computed: {
...mapState({
a: state => state.some.nested.module.a,
b: state => state.some.nested.module.b
}),
methods: {
...mapActions([
'some/nested/module/foo',
'some/nested/module/bar'
])
}
}
對(duì)于這種情況,你可以將模塊的命名空間作為第一個(gè)參數(shù)傳遞給上述函數(shù),這樣所有的綁定會(huì)自動(dòng)將該模塊作為上下文。簡(jiǎn)化寫就是
computed: {
...mapStates('some/nested/module', {
a: state => state.a,
b: state => state.b
})
},
methods: {
...mapActions('some/nested/module',[
'foo',
'bar'
])
}
六、模塊重用
有時(shí)我們可能創(chuàng)建一個(gè)模塊的多個(gè)實(shí)例,例如:
- 創(chuàng)建多個(gè)store,他們共用一個(gè)模塊
- 在一個(gè)store中多次注冊(cè)同一個(gè)模塊
如果我們使用一個(gè)純對(duì)象來(lái)聲明模塊的狀態(tài),那么這個(gè)狀態(tài)對(duì)象會(huì)通過(guò)引用被共享,導(dǎo)致數(shù)據(jù)互相污染。
實(shí)際上Vue組件內(nèi)data是同樣的問(wèn)題,因此解決辦法也是一樣的,使用一個(gè)函數(shù)來(lái)聲明模塊狀態(tài)(2.3.0+支持)
const MyModule = {
state () {
return {
foo: 'far'
}
}
}
七、總結(jié)
到這里模塊化(module)的內(nèi)容就已經(jīng)講完了,本次主要講解了module出現(xiàn)的原因,使用方法,全局和局部namespaced模塊命名空間,局部訪問(wèn)全局內(nèi)容,map函數(shù)帶有命名空間的綁定函數(shù)和模塊的重用。
引用
https://vuex.vuejs.org Vuex官方文檔
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3異步數(shù)據(jù)加載組件suspense的使用方法
前端開(kāi)發(fā)中異步請(qǐng)求是非常常見(jiàn)的事情,比如遠(yuǎn)程讀取圖片,調(diào)用后端接口等等,這篇文章主要給大家介紹了關(guān)于Vue3異步數(shù)據(jù)加載組件suspense的使用方法,suspense中文含義是懸念的意思,需要的朋友可以參考下2021-08-08
vue實(shí)現(xiàn)把頁(yè)面導(dǎo)出成word文件的方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)把頁(yè)面導(dǎo)出成word文件的方法,文中的實(shí)現(xiàn)步驟講解詳細(xì),并且有詳細(xì)的代碼示例,需要的小伙伴可以參考一下2023-10-10
前端Vue?select下拉框使用以及監(jiān)聽(tīng)事件詳解
由于前端項(xiàng)目使用的是Vue.js和bootstrap整合開(kāi)發(fā),中間用到了select下拉框,這篇文章主要給大家介紹了關(guān)于前端Vue?select下拉框使用以及監(jiān)聽(tīng)事件的相關(guān)資料,需要的朋友可以參考下2024-03-03
vue項(xiàng)目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問(wèn)題
這篇文章主要介紹了vue項(xiàng)目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
vue-quill-editor插入圖片路徑太長(zhǎng)問(wèn)題解決方法
這篇文章主要介紹了vue-quill-editor插入圖片路徑太長(zhǎng)問(wèn)題解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
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
vue3內(nèi)嵌iframe的傳參與接收參數(shù)代碼示例
這篇文章主要給大家介紹了關(guān)于vue3內(nèi)嵌iframe的傳參與接收參數(shù)的相關(guān)資料,Vue項(xiàng)目中使用iframe及傳值功能相信有不少人都遇到過(guò),需要的朋友可以參考下2023-07-07

