深入理解Vuex 模塊化(module)
一、為什么需要模塊化
前面我們講到的例子都在一個狀態(tài)樹里進行，當一個項目比較大時，所有的狀態(tài)都集中在一起會得到一個比較大的對象，進而顯得臃腫，難以維護。為了解決這個問題，Vuex允許我們將store分割成模塊（module），每個module有自己的state，mutation，action，getter，甚至還可以往下嵌套模塊，下面我們看一個典型的模塊化例子
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)
模塊內部的mutation和getter，接收的第一參數(shù)（state）是模塊的局部狀態(tài)對象,rootState
const moduleA = {
state: { count: 0},
mutations: {
increment (state) {
// state是模塊的局部狀態(tài)，也就是上面的state
state.count++
}
},
getters: {
doubleCount (state, getters, rootState) {
// 參數(shù) state為當前局部狀態(tài)，rootState為根節(jié)點狀態(tài)
return state.count * 2
}
},
actions: {
incremtnIfOddRootSum ( { state, commit, rootState } ) {
// 參數(shù) state為當前局部狀態(tài)，rootState為根節(jié)點狀態(tài)
if ((state.cont + rootState.count) % 2 === 1) {
commit('increment')
}
}
}
}
三、命名空間（這里一定要看，不然有些時候會被坑）
上面所有的例子中，模塊內部的action、mutation、getter是注冊在全局命名空間的，如果你在moduleA和moduleB里分別聲明了命名相同的action或者mutation或者getter（叫some），當你使用store.commit('some')，A和B模塊會同時響應。所以，如果你希望你的模塊更加自包含和提高可重用性，你可以添加namespaced: true的方式，使其成為命名空間模塊。當模塊被注冊后，它的所有getter，action，mutation都會自動根據(jù)模塊注冊的路徑調用整個命名，例如：
const store = new Vuex.Store({
modules: {
account: {
namespaced: true,
state: {...}, // 模塊內的狀態(tài)已經是嵌套的，namespaced不會有影響
getters: { // 每一條注釋為調用方法
isAdmin () { ... } // getters['account/isAdmin']
},
actions: {
login () {...} // dispatch('account/login')
},
mutations: {
login () {...} // commit('account/login')
},
modules: { // 繼承父模塊的命名空間
myPage : {
state: {...},
getters: {
profile () {...} // getters['account/profile']
}
},
posts: { // 進一步嵌套命名空間
namespaced: true,
getters: {
popular () {...} // getters['account/posts/popular']
}
}
}
}
}
})
啟用了命名空間的getter和action會收到局部化的getter，dispatch和commit。你在使用模塊內容時不需要再同一模塊內添加空間名前綴，更改namespaced屬性后不需要修改模塊內的代碼。
四、在命名空間模塊內訪問全局內容（Global Assets）
如果你希望使用全局state和getter，roorState和rootGetter會作為第三和第四參數(shù)傳入getter，也會通過context對象的屬性傳入action若需要在全局命名空間內分發(fā)action或者提交mutation，將{ root: true }作為第三參數(shù)傳給dispatch或commit即可。
modules: {
foo: {
namespaced: true,
getters: {
// 在這個被命名的模塊里，getters被局部化了
// 你可以使用getter的第四個參數(shù)來調用 'rootGetters'
someGetter (state, getters, rootSate, rootGetters) {
getters.someOtherGetter // -> 局部的getter， ‘foo/someOtherGetter'
rootGetters.someOtherGetter // -> 全局getter, 'someOtherGetter'
}
},
actions: {
// 在這個模塊里，dispatch和commit也被局部化了
// 他們可以接受root屬性以訪問跟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ù)
前面說過，帶了命名空間后，調用時必須要寫上命名空間，但是這樣就比較繁瑣，尤其涉及到多層嵌套時（當然開發(fā)中別嵌套太多，會暈。。）
下面我們看下一般寫法
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'
])
}
}
對于這種情況，你可以將模塊的命名空間作為第一個參數(shù)傳遞給上述函數(shù)，這樣所有的綁定會自動將該模塊作為上下文。簡化寫就是
computed: {
...mapStates('some/nested/module', {
a: state => state.a,
b: state => state.b
})
},
methods: {
...mapActions('some/nested/module',[
'foo',
'bar'
])
}
六、模塊重用
有時我們可能創(chuàng)建一個模塊的多個實例，例如：
- 創(chuàng)建多個store，他們共用一個模塊
- 在一個store中多次注冊同一個模塊
如果我們使用一個純對象來聲明模塊的狀態(tài)，那么這個狀態(tài)對象會通過引用被共享，導致數(shù)據(jù)互相污染。
實際上Vue組件內data是同樣的問題，因此解決辦法也是一樣的，使用一個函數(shù)來聲明模塊狀態(tài)（2.3.0+支持）
const MyModule = {
state () {
return {
foo: 'far'
}
}
}
七、總結
到這里模塊化（module）的內容就已經講完了，本次主要講解了module出現(xiàn)的原因，使用方法，全局和局部namespaced模塊命名空間，局部訪問全局內容，map函數(shù)帶有命名空間的綁定函數(shù)和模塊的重用。
引用
https://vuex.vuejs.org Vuex官方文檔
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Element input樹型下拉框的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
本篇文章主要給大家詳細代碼講解了vue2.0 elementUI制作面包屑導航欄的過程，對此有興趣的朋友可以學習下。2018-02-02
AES算法是一種對稱加密算法,用于加密和解密數(shù)據(jù),下面這篇文章主要給大家介紹了關于Vue項目中實現(xiàn)AES加密解密的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-08-08
冒泡事件處理是由內而外發(fā)生的,例如有兩個父子div,給他們分別寫上點擊事件,點擊子div先響應的是子div,再是父div,下面這篇文章主要給大家介紹了關于vue項目遇見事件冒泡該如何處理的相關資料,需要的朋友可以參考下2023-04-04
Vue項目報錯:Uncaught?SyntaxError:?Unexpected?token?'＜&a
最近在做vue項目時,需要引入一個第三方的js文件,在index.html中通過以下方式引入JS文件編譯后就報了這個問題,這篇文章主要給大家介紹了關于Vue項目報錯:Uncaught?SyntaxError:?Unexpected?token?'＜'的解決方法,需要的朋友可以參考下2022-08-08
在現(xiàn)代 web 應用程序中,圖片預覽功能提升了用戶體驗,使用戶可以在上傳圖片之前查看圖片內容,本文將詳細介紹如何在 Vue.js 應用中實現(xiàn)圖片預覽功能,包括基本實現(xiàn)、進階功能、與 Element UI 的集成、常見優(yōu)化技巧以及與其他庫的結合使用,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue3.0 proxy設置代理不成功的問題及解決方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
這篇文章主要為大家介紹了Vue.js的Class與樣式綁定,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了Vue項目history模式下微信分享爬坑總結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單網頁計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04