您好,登錄后才能下訂單哦!
這篇文章主要介紹了vuex中的Modules怎么使用的相關(guān)知識,內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇vuex中的Modules怎么使用文章都會(huì)有所收獲,下面我們一起來看看吧。
Vuex允許我們將store分割成模塊(Module), 而每個(gè)模塊擁有自己的state、getters、mutation、action等,甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割。
const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: () => ({ ... }), mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) this.store.state.a // -> 獲得moduleA 的狀態(tài) this.store.state.b // -> 獲得moduleB 的狀態(tài)
內(nèi)部state,模塊內(nèi)部的state是局部的,也就是模塊私有的,
內(nèi)部getter,mutation,action 仍然注冊在全局命名空間內(nèi),這樣使得多個(gè)模塊能夠?qū)ν?mutation 或 action 作出響應(yīng)。
對于模塊內(nèi)部的 mutation 和 getter,接收的第一個(gè)參數(shù)是模塊的局部狀態(tài)對象 state。
對于模塊內(nèi)部的 action,局部狀態(tài)通過 context.state 暴露出來,根節(jié)點(diǎn)狀態(tài)則為 context.rootState:
對于模塊內(nèi)部的 getter,根節(jié)點(diǎn)狀態(tài)會(huì)作為第三個(gè)參數(shù)暴露出來:
const moduleA = { state: () => ({ count:"", }), actions: { //這里的state為局部狀態(tài),rootState為根節(jié)點(diǎn)狀態(tài) incrementIfOddOnRootSum ({ state, commit, rootState }) { if ((state.count + rootState.count) % 2 === 1) { commit('increment') } } } mutations: { // 這里的 `state` 對象是模塊的局部狀態(tài) increment (state) { state.count++ } }, getters: { //這里的state為局部狀態(tài),rootState為根節(jié)點(diǎn)狀態(tài) doubleCount (state) { return state.count * 2 }, sumWithRootCount (state, getters, rootState) { return state.count + rootState.count } } }
當(dāng)模塊被注冊后,它的所有 getter、action 及 mutation 都會(huì)自動(dòng)根據(jù)模塊注冊的路徑調(diào)整命名。
const store = new Vuex.Store({ modules: { account: { namespaced: true, // 模塊內(nèi)容(module assets) 在使用模塊內(nèi)容(module assets)時(shí)不需要在同一模塊內(nèi)額外添加空間名前綴。 state: () => ({}), // 模塊內(nèi)的狀態(tài)已經(jīng)是嵌套的了,使用 `namespaced` 屬性不會(huì)對其產(chǎn)生影響 getters: { isAdmin() {}, // ->使用: getters['account/isAdmin'], // 你可以使用 getter 的第四個(gè)參數(shù)來調(diào)用 someGetter(state, getters, rootState, rootGetters) { // getters.isAdmin // rootGetters.someOtherGetter }, }, actions: { login() {}, // ->使用: dispatch('account/login') // 你可以使用 action 的第四個(gè)參數(shù)來調(diào)用 //若需要在全局命名空間內(nèi)分發(fā) action 或提交 mutation,將 { root: true } 作為第三參數(shù)傳給 dispatch 或 commit 即可 someAction({ dispatch, commit, getters, rootGetters }) { // getters.isAdmin; // rootGetters.someGetter; // dispatch("someOtherAction"); // dispatch("someOtherAction", null, { root: true }); // commit("someMutation"); // commit("someMutation", null, { root: true }); }, someOtherAction(ctx, payload) {}, // 若需要在帶命名空間的模塊注冊全局 action,你可添加 root: true,并將這個(gè) action 的定義放在函數(shù) handler 中。 otherAction: { root: true, handler(namespacedContext, payload) {}, // -> 'someAction' }, }, mutations: { login() {}, // ->使用: commit('account/login') }, // 嵌套模塊 modules: { // 繼承父模塊的命名空間 myPage: { state: () => ({}), getters: { profile() {}, // -> 使用:getters['account/profile'] }, }, // 進(jìn)一步嵌套命名空間 posts: { namespaced: true, state: () => ({}), getters: { popular() {}, // -> 使用:getters['account/posts/popular'] }, }, }, }, }, });
當(dāng)使用 mapState, mapGetters, mapActions 和 mapMutations 這些函數(shù)來綁定帶命名空間的模塊時(shí),寫起來可能比較繁瑣:
computed: { ...mapState({ a: state => state.some.nested.module.a, b: state => state.some.nested.module.b }) }, methods: { ...mapActions([ 'some/nested/module/foo', // -> this['some/nested/module/foo']() 'some/nested/module/bar' // -> this['some/nested/module/bar']() ]) }
createNamespacedHelpers 創(chuàng)建基于某個(gè)命名空間輔助函數(shù),它返回一個(gè)對象,對象里有新的綁定在給定命名空間值上的組件綁定輔助函數(shù)。
import { createNamespacedHelpers } from 'vuex' const { mapState, mapActions } = createNamespacedHelpers('some/nested/module') export default { computed: { // 在 `some/nested/module` 中查找 ...mapState({ a: state => state.a, b: state => state.b }) }, methods: { // 在 `some/nested/module` 中查找 ...mapActions([ 'foo', 'bar' ]) } }
在 store 創(chuàng)建之后,你可以使用 store.registerModule 方法注冊模塊
import Vuex from 'vuex' const store = new Vuex.Store({ /* 選項(xiàng) */ }) // 注冊模塊 `myModule` store.registerModule('myModule', { // ... }) // 注冊嵌套模塊 `nested/myModule` store.registerModule(['nested', 'myModule'], { // ... })
之后就可以通過 store.state.myModule 和 store.state.nested.myModule 訪問模塊的狀態(tài)。
也可以使用 store.unregisterModule(moduleName) 來動(dòng)態(tài)卸載模塊。注意,你不能使用此方法卸載靜態(tài)模塊(即創(chuàng)建 store 時(shí)聲明的模塊)。
可以通過 store.hasModule(moduleName) 方法檢查該模塊是否已經(jīng)被注冊到 store。
關(guān)于“vuex中的Modules怎么使用”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“vuex中的Modules怎么使用”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。