快捷導(dǎo)航

Vuex 模塊化使用詳解

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

這篇文章主要介紹了Vuex 模塊化使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言上回我們說(shuō)了一下 vuex 的簡(jiǎn)單使用，最后面的時(shí)候有說(shuō)了，由于使用單一狀態(tài)樹(shù)，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對(duì)象就有可能變得相當(dāng)臃腫。

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

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

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

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

// 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)對(duì)象的定義

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

getter

getter 的話(huà)，他會(huì)有三個(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` 對(duì)象是模塊的局部狀態(tài)
 SET_B_NAME(state, payload) {
  debugger
  state.bName = payload.name;
 }
}

action

最后的 action 的話(huà)，他傳入還是只有 context 對(duì)象，然后咧，這個(gè)對(duì)象里面的 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è)的話(huà)要在原來(lái)狀態(tài)名前面加一個(gè)模塊名才能放到到模塊內(nèi)的對(duì)象。具體如下

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

3.2 命名空間

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

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

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

因?yàn)橛辛嗣臻g這么一層封裝，所以我們?cè)谟幂o助函數(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',
}),

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

// 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è)模塊的話(huà)，我們可以使用 createNamespacedHelpers 創(chuàng)建基于某個(gè)命名空間輔助函數(shù)，如下：

import { createNamespacedHelpers } from 'vuex'

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

這樣創(chuàng)建之后，我們就可以用之前的寫(xiě)法來(lái)訪(fǎng)問(wèn)到模塊的狀態(tài)。

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

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

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

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

modules: {
 foo: {
  namespaced: true,

  getters: {
   // 在這個(gè)模塊的 getter 中，`getters` 被局部化了
   // 你可以使用 getter 的第四個(gè)參數(shù)來(lái)調(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` 屬性以訪(fǎng)問(wèn)根 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 注冊(cè)為全局

這個(gè)感覺(jué)和維護(hù)模塊的封裝性有點(diǎn)沖突，但是既然作者提出來(lái)了，那就學(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 的介紹就說(shuō)到這里了，這兩篇筆記的項(xiàng)目源碼我發(fā)到了 GitHub 上面，大家可以去看一下，要是項(xiàng)目中有啥不明白的或者我說(shuō)的有問(wèn)題的，歡迎大家留言指正。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: