Vuex入門（終章） module使用隨便講講

本文**

關於module的使用，為什麼說隨便講講，因為個人覺得module的分模組本身就毫無意義，如果分模組後可以部分載入什麼的可能還有點效能上的優化，然而並沒有，事實上在本系列的第一章我就闡述了vuex的初衷——公共狀態管理。vuex被設計出來並不是為了代替vue的，他只是乙個工具而已，因此在實際使用過程中一般沒必要去分成許多模組，一般公共狀態就是公共狀態，他不能被歸類到某一模組中去，他是所有子模組共用的。下面進入隨便講講：

由於使用單一的狀態樹，應用的所有狀態會集中到乙個比較大的物件。當應用變得非常複雜，store物件就會變得非常臃腫；為了解決這個問題，vuex允許我們將store分隔成模組（module），每個模組擁有自己的state，mutation，action，getter，甚至是巢狀子模組。

const modulea=,
mutations:{},
actions:{},
getters:{}
}const moduleb=,
mutations:{},
actions:{},
getters:{}
}const store=new vuex.store(
})store.state.a
store.state.b

對於模組內部的mutation和getter，接受的第乙個引數是

模組的區域性狀態物件

；

const modulea=,
mutations:
},getters:
}}

同樣，對於模組內部的action，區域性狀態通過context.state暴露出來，根節點狀態則為content.rootstate;

const modulea=)}}
}

對於模組內部的getter，根節點狀態作為第三個引數暴露出來

const modulea=
}}

預設情況下，模組內部的action ,mutation，getter是註冊在全域性命名空間的–這樣使得多個模組能夠對同一mutation或者action做出響應；如果希望你的模組更加自包含或者提高可重用性，你可以通過新增namespaced:true 的方式使其成為命名空間模組，當模組被註冊後，他的所有getter,action，mutation都會自動根據模組註冊的路徑調整命名；

const store=new vuex.store(,
getters:
},//getters['account/isadmin']
actions:},//dispatch['account/login']
mutations:
},//commit('account/login')
//巢狀模組
modules:,
getters:// -> getters['account/profile']}},
//進一步巢狀命名空間
post:,
getters}}
}}
})

如果你希望使用全域性state，getter；rootstate跟rootgetter會作為第三，第四引數傳入getter,也會通過context物件的屬性傳入action；如果需要在全域性命名空間內部分發action或者提交mutation，將最為第三個引數傳給dispatch或者commit即可；

modules:,
someothergetter:state=>{}
},actions:))
dispatch('somemutation')
dispatch('somemutation',null,)
},someotheraction(ctx,payload){}}}
}

當使用mapstate，mapgetters，mapactions，mapmutations這些函式來繫結命名空間模組時，寫起來可能比較繁瑣

computed:)
},methods:

Vuex入門（終章） module使用隨便講講

Vuex簡單入門

Vuex簡單入門

小白入門Vuex

Vuex入門（終章） module使用隨便講講

Vuex簡單入門

Vuex簡單入門

小白入門Vuex

相關推薦