使用Vuex怎么實現模塊化

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

1 文件結構

文件結構的話，模塊化的使用要多一個 modules 的文件夾，里面放著細分模塊的 js 文件/模塊名文件夾。

這里官方的標準是一個模塊一個 js 文件，但是要是模塊太復雜的話，也可以把里面的代碼拆分出來。

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

然后在創建 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 模塊的局部狀態對象的定義

模塊內部的 getter，mutation 和 action，他們方法接收的參數會和根狀態的不一樣，我們一個一個來

getter

getter 的話，他會有三個參數，第一個是模塊內的 state，第二個是 模塊內的 getters，第三個是根節點狀態 rootState，

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

mutation

mutation 里面的回調函數傳入的第一個參數也是 模塊內的 state，其他和根狀態定義的時候一樣

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

action

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

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

3 使用

3.1 state 獲取

這個的話要在原來狀態名前面加一個模塊名才能放到到模塊內的對象。具體如下

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

3.2 命名空間

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

// moduleB 模塊導出的時候加個 namespaced: true,
export default {
 namespaced: true,
 state,
 getters,
 mutations,
 actions,
}

3.2.1 輔助函數的使用

因為有了命名空間這么一層封裝，所以我們在用輔助函數的時候都要多加那么一層模塊名，具體看下面代碼。

// 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',
}),

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

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

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

除了這個之外，如果你當前組件用的 vuex 狀態都是一個模塊的話，我們可以使用 createNamespacedHelpers 創建基于某個命名空間輔助函數，如下：

import { createNamespacedHelpers } from 'vuex'

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

這樣創建之后，我們就可以用之前的寫法來訪問到模塊的狀態。

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

3.2.2 在帶命名空間的模塊內訪問全局內容

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

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

modules: {
 foo: {
  namespaced: true,

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

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

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

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

3.2.3 將模塊內的 action 注冊為全局

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

const actions = {
  // 模塊內 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)
    }
  }
}

關于使用Vuex怎么實現模塊化就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。