千鋒教育-做有情懷、有良心、有品質的職業教育機構
由于使用單一狀態樹,應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時,store 對象就有可能變得相當臃腫。
為了解決以上問題,Vuex 允許我們將 store 分割成模塊(module)。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割:
vuex模塊化后,需要另一個模塊的state變化,可以在這個模塊中定義getters 獲取,具體代碼如下
// 模塊a
const modulea = {
namespaced: true,
state: {
num: 10
},
mutations: {
ADD_NUM(state, n) {
state.num += n
}
}
}
// 模塊b
const moduleb = {
namespaced: true,
state: {
num: 10
},
getters: {
// 在這里拿到 模塊a numstate
moduleaNum (state, getters, rootState, rootGetters) {
// 模塊下的getter有四個參數分別是當前模塊的state,當前模塊的getters,以及根state個根getters可以通過rootState獲取其他模塊的state
return rootState.modulea.num
}
},
mutations: {
ADD_NUM(state, n) {
state.num += n
}
}
}
相關推薦