如果希望你的模塊具有更高的封裝度和復用性,你可以通過添加 namespaced: true
的方式使其成為帶命名空間的模塊。當模塊被注冊后,它的所有 getter、action 及 mutation 都會自動根據模塊注冊的路徑調整命名
const store = new Vuex.Store({ modules: { account: { namespaced: true, // 模塊內容(module assets) state: { ... }, // 模塊內的狀態已經是嵌套的了,使用 `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, state: { ... }, getters: { popular () { ... } // -> getters['account/posts/popular'] } } } } } })
這時候我們在不同模塊寫方法就不用擔心命名沖突了