使用Vuex怎么實(shí)現(xiàn)模塊化

這篇文章給大家介紹使用Vuex怎么實(shí)現(xiàn)模塊化，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

1 文件結(jié)構(gòu)

文件結(jié)構(gòu)的話，模塊化的使用要多一個(gè) modules 的文件夾，里面放著細(xì)分模塊的 js 文件/模塊名文件夾。

這里官方的標(biāo)準(zhǔn)是一個(gè)模塊一個(gè) js 文件，但是要是模塊太復(fù)雜的話，也可以把里面的代碼拆分出來。

// store 文件夾 
│ actions.js
│ getters.js
│ index.js
│ mutations.js
│ state.js
│
└─modules
  │ moduleB.js
  │
  └─moduleA
      index.js
      mutation.js
      state.js

然后在創(chuàng)建 store 的 js 文件中引入這些模塊，直接

import moduleA from './modules/moduleA/index'
import moduleB from './modules/moduleB';

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules: {
    moduleA,
    moduleB,
  }
});

2 模塊的局部狀態(tài)對象的定義

模塊內(nèi)部的 getter，mutation 和 action，他們方法接收的參數(shù)會和根狀態(tài)的不一樣，我們一個(gè)一個(gè)來

getter

getter 的話，他會有三個(gè)參數(shù)，第一個(gè)是模塊內(nèi)的 state，第二個(gè)是 模塊內(nèi)的 getters，第三個(gè)是根節(jié)點(diǎn)狀態(tài) rootState，

const getters = {
 bFullName: (state, getters, rootState) => `full${state.bName}`
}

mutation

mutation 里面的回調(diào)函數(shù)傳入的第一個(gè)參數(shù)也是 模塊內(nèi)的 state，其他和根狀態(tài)定義的時(shí)候一樣

const mutations = {
 // 這里的 `state` 對象是模塊的局部狀態(tài)
 SET_B_NAME(state, payload) {
  debugger
  state.bName = payload.name;
 }
}

action

最后的 action 的話，他傳入還是只有 context 對象，然后咧，這個(gè)對象里面的 state 屬性指模塊內(nèi)的狀態(tài)，rootState 指根狀態(tài)，如下

const actions = {
 ASYNC_SET_NAME({ state, commit, rootState }, payload) {
  setTimeout(() => {
   state.bName = 'asyncName'
  }, 4000)
 }
}

3 使用

3.1 state 獲取

這個(gè)的話要在原來狀態(tài)名前面加一個(gè)模塊名才能放到到模塊內(nèi)的對象。具體如下

// 原先的基礎(chǔ)上加個(gè)模塊名
this.$store.state.moduleB.bName;
// 輔助函數(shù)也一樣，name 前面加個(gè)模塊名 Deno
...mapState({
  name: state => state.moduleB.bName,
})

3.2 命名空間

getter，mutation，action 他們默認(rèn)都是注冊在全局命名空間的，所以我們默認(rèn)是可以和使用根狀態(tài)一樣去使用他們，但是這樣不可避免會出現(xiàn)命名沖突的問題，所以使模塊有更高的封裝性與復(fù)用性，我們可以通過添加 `
namespaced: true` 使其成為帶命名空間的模塊。當(dāng)模塊被注冊后，它的所有 getter、action 及 mutation 都會自動根據(jù)模塊注冊的路徑調(diào)整命名。

// moduleB 模塊導(dǎo)出的時(shí)候加個(gè) namespaced: true,
export default {
 namespaced: true,
 state,
 getters,
 mutations,
 actions,
}

3.2.1 輔助函數(shù)的使用

因?yàn)橛辛嗣臻g這么一層封裝，所以我們在用輔助函數(shù)的時(shí)候都要多加那么一層模塊名，具體看下面代碼。

// getter
this.$store.getters['moduleB/bFullName']; 

...mapGetters({
 bGetter2: 'moduleB/bFullName'
})

// mutation 
this.$store.commit('moduleB/SET_B_NAME', {
 name: 'QQ'
});

...mapMutations({
 setBname: 'moduleB/SET_B_NAME'
}),

// action
this.$store.dispatch('moduleB/ASYNC_SET_NAME', { name: "JJ" });

...mapActions({
 aSetAge: 'moduleB/ASYNC_SET_NAME',
}),

每次都要寫模塊名，這樣寫下來很煩，所以這些輔助函數(shù)給我們提供了一個(gè)參數(shù)位來綁定命名空間。

// moduleB 模塊內(nèi)的 bName
...mapState('moduleB', {
 name: state => state.bName
})

// 同理 mapAction mapMutation 也可以這個(gè)樣子
...mapAction('moduleB',[
 '/ASYNC_SET_NAME'
])

除了這個(gè)之外，如果你當(dāng)前組件用的 vuex 狀態(tài)都是一個(gè)模塊的話，我們可以使用 createNamespacedHelpers 創(chuàng)建基于某個(gè)命名空間輔助函數(shù)，如下：

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('moduleB') // moduleName

這樣創(chuàng)建之后，我們就可以用之前的寫法來訪問到模塊的狀態(tài)。

...mapState({
 bName: state => state.bName,
}),

3.2.2 在帶命名空間的模塊內(nèi)訪問全局內(nèi)容

如果你希望使用全局 state 和 getter，rootState 和 rootGetter 會作為第三和第四參數(shù)傳入 getter，也會通過 context 對象的屬性傳入 action。

若需要在全局命名空間內(nèi)分發(fā) action 或提交 mutation，將 { root: true } 作為第三參數(shù)傳給 dispatch 或 commit 即可。具體看下面代碼：

modules: {
 foo: {
  namespaced: true,

  getters: {
   // 在這個(gè)模塊的 getter 中，`getters` 被局部化了
   // 你可以使用 getter 的第四個(gè)參數(shù)來調(diào)用 `rootGetters`
   someGetter (state, getters, rootState, rootGetters) {
    getters.someOtherGetter // -> 'foo/someOtherGetter 模塊內(nèi)的 getter'
    rootGetters.someOtherGetter // -> 'someOtherGetter 全局的getter'
   },
   someOtherGetter: state => { ... }
  },

  actions: {
   // 在這個(gè)模塊中， dispatch 和 commit 也被局部化了
   // 他們可以接受 `root` 屬性以訪問根 dispatch 或 commit
   someAction ({ dispatch, commit, getters, rootGetters }) {
    getters.someGetter // -> 'foo/someGetter'
    rootGetters.someGetter // -> 'someGetter'

    dispatch('someOtherAction') // -> 'foo/someOtherAction' 模塊內(nèi)的 action
    dispatch('someOtherAction', null, { root: true }) // ->'someOtherAction' 全局的 action 

    commit('someMutation') // -> 'foo/someMutation' 模塊內(nèi)的 action
    commit('someMutation', null, { root: true }) // -> 'someMutation' 全局 mutation
   },
   someOtherAction (ctx, payload) { ... }
  }
 }
}

3.2.3 將模塊內(nèi)的 action 注冊為全局

這個(gè)感覺和維護(hù)模塊的封裝性有點(diǎn)沖突，但是既然作者提出來了，那就學(xué)吧，當(dāng)我們想要我們模塊內(nèi)的某個(gè) action 提升為全局 action 的時(shí)候，在他聲明的時(shí)候，添加 root: true，并將 action 的定義放到 hanler 函數(shù)中，具體如下：

const actions = {
  // 模塊內(nèi) action
  [ASET_AGE]({ commit }, payload) {
    setTimeout(() => {
      commit('SET_B_NAME', payload.name);
    }, 2000)
  },
  // 提升到全局的 action 
  globalAction: {
    root: true,
    handler({ commit }, payload) {
      debugger
      setTimeout(() => {
        commit('SET_B_NAME', payload.name);
      }, 2000)
    }
  }
}

關(guān)于使用Vuex怎么實(shí)現(xiàn)模塊化就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。