Vuex 模塊化使用詳解

更新時間：2019年07月31日 09:44:46 作者：小紅帽

這篇文章主要介紹了Vuex 模塊化使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言上回我們說了一下 vuex 的簡單使用，最后面的時候有說了，由于使用單一狀態(tài)樹，應用的所有狀態(tài)會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。

為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割，今天我們也來簡單了解一下他的使用，深入學習可能還是要去看官方文檔

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

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

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

// 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)的不一樣，我們一個一個來

getter

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

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

mutation

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

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

action

最后的 action 的話，他傳入還是只有 context 對象，然后咧，這個對象里面的 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 獲取

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

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

3.2 命名空間

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

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

3.2.1 輔助函數(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ù)給我們提供了一個參數(shù)位來綁定命名空間。

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

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

除了這個之外，如果你當前組件用的 vuex 狀態(tài)都是一個模塊的話，我們可以使用 createNamespacedHelpers 創(chuàng)建基于某個命名空間輔助函數(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: {
   // 在這個模塊的 getter 中，`getters` 被局部化了
   // 你可以使用 getter 的第四個參數(shù)來調(diào)用 `rootGetters`
   someGetter (state, getters, rootState, rootGetters) {
    getters.someOtherGetter // -> 'foo/someOtherGetter 模塊內(nèi)的 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' 模塊內(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 注冊為全局

這個感覺和維護模塊的封裝性有點沖突，但是既然作者提出來了，那就學吧，當我們想要我們模塊內(nèi)的某個 action 提升為全局 action 的時候，在他聲明的時候，添加 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 的介紹就說到這里了，這兩篇筆記的項目源碼我發(fā)到了 GitHub 上面，大家可以去看一下，要是項目中有啥不明白的或者我說的有問題的，歡迎大家留言指正。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: