vuex 多模塊時模塊內(nèi)部的mutation和action的調(diào)用方式

更新時間：2020年07月24日 15:22:05 作者：林_xi

這篇文章主要介紹了vuex 多模塊時模塊內(nèi)部的mutation和action的調(diào)用方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

vue在做大型項目時，會用到多狀態(tài)管理，vuex允許我們將store分割成多個模塊，每個模塊內(nèi)都有自己的state、mutation、action、getter。模塊內(nèi)還可以繼續(xù)嵌套相對應(yīng)的子模塊。

為了鞏固我自己對store多模塊的一些基本認識，寫了個簡單的多模塊實例，下圖為我自己創(chuàng)建的store的目錄結(jié)構(gòu)，modules文件夾內(nèi)的模塊，在實際項目中還可以繼續(xù)分開類似store目錄下的多文件結(jié)構(gòu)，也就是單獨的模塊文件夾，方便后期修改。

store目錄結(jié)構(gòu)

./store/index.js的代碼如下：

import Vue from 'vue'
import Vuex from 'vuex'
// import mutations from './mutations'
import modulesA from './modules/modulesA'
import modulesB from './modules/modulesB'
 
Vue.use(Vuex)
 
const state = {
 logined: false,
 userid: -1
}
 
const store = new Vuex.Store({
 state,
 mutations: {
  'UPDATE_LOGIN_STATUS': (state, payload) => {
   state.logined = true
  }
 },
 modules: {
  modulesA: modulesA,
  modulesB: modulesB
 }
})
 
export default store

這里為了方便和子模塊進行對比，我將mutations.js的代碼放到index.js里面

modulesA.js的代碼如下：

const moduleA = {
 namespaced: true,
 state: {
  isVip1: false
 },
 mutations: {
  'UPDATE_TO_VIP1': (state, payload) => {
   state.isVip1 = true
  }
 },
 actions: {
  getVip1 ({ state, commit, rootState }) {
   commit('UPDATE_TO_VIP1')
  }
 },
 getters: {}
}
export default moduleA

modulesB.js的代碼如下：

const moduleB = {
 // namespaced: true,
 state: {
  isVip2: false
 },
 mutations: {
  'UPDATE_TO_VIP2': (state, payload) => {
   state.isVip2 = true
  }
 },
 actions: {
  getVip2 ({ state, commit, rootState }) {
   commit('UPDATE_TO_VIP2')
  }
 },
 getters: {}
}
export default moduleB

估計看到這里，你會發(fā)現(xiàn)modulesA和modulesB的區(qū)別就是有無namespaced這個屬性。在vuex內(nèi)，模塊內(nèi)部的action、mutation、getter都會被注冊在全局命名空間內(nèi)，俗話就是注冊成全局的，這樣做的結(jié)果就是在調(diào)用相對應(yīng)的名字的的action或者mutation或者getter的時候，所有同名的都將會被響應(yīng)。讓我們來看看當沒有namespaced（或者值為false）的時候，在組件內(nèi)是怎么調(diào)用的，代碼如下：

<template>
 <div class="hello">
  <h1>{{ msg }}</h1>
  <ul>
   <li>global state <strong>logined</strong>: {{ globalState }}</li>
   <li>modulesA state <strong>isVip1</strong> {{ modulesAState }}</li>
  </ul>
 </div>
</template>
 
<script>
export default {
 name: 'test',
 data () {
  return {
   msg: 'Test vuex mutilple modules'
  }
 },
 created () {
  console.log(this.$store.state)
  setTimeout(() => {
   this.$store.commit('UPDATE_LOGIN_STATUS')
  }, 1000)
  setTimeout(() => {
   this.$store.commit('UPDATE_TO_VIP1')
   // this.$store.dispatch('getVip1')
  }, 2000)
  setTimeout(() => {
   // this.$store.commit('CANCEL_VIP1')
   this.$store.dispatch('cancelVip1')
  }, 3000)
 },
 computed: {
  globalState () {
   return this.$store.state.logined
  },
  modulesAState () {
   return this.$store.state.modulesA.isVip1
  }
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

執(zhí)行代碼的截圖如下：

可以看到，我在store里面commit一個UPDATE_LOGIN_STATUS，將最頂層state中的logined的值改為true。2s的時候在store里面commit了UPDATE_TO_VIP1和3s的時候dispatch了一個事件CANCEL_VIP1，將modulesA的isVip1的值從false => true => false。說明沒有開啟命名空間是可以直接commit或者dispatch子模塊內(nèi)相對應(yīng)的方法名，是可以修改到自身state中的屬性的。

如果namespaced的值為true時，那么就是開啟了命名空間模塊，調(diào)用子模塊的getter、mutation、getter的時候就跟之前不一樣了，vuex它內(nèi)部會自動根據(jù)模塊注冊的路徑調(diào)整命名，比如要dispatch B中的一個action的話，那么組件內(nèi)的調(diào)用就應(yīng)該是如下這樣的：

// this.$store.dispatch('modulesB/getVip2')

this.$store.commit('modulesB/UPDATE_TO_VIP2')

日常項目中，在store有多個狀態(tài)需要管理的時候，一般來說是應(yīng)該要開啟namespaced的，這樣子能夠使我們的代碼能夠有更強的封裝性以及更少的耦合。

補充知識：Vuex 模塊化+命名空間后, 如何調(diào)用其他模塊的 state, actions, mutations, getters ?

由于 Vuex 使用了單一狀態(tài)樹，應(yīng)用的所有狀態(tài)都包含在一個大對象中。那么，隨著應(yīng)用的不斷擴展，store 會變得非常臃腫。

為了解決這個問題，Vuex 允許我們把 store 分 module（模塊）。每一個模塊包含各自的狀態(tài)、mutation、action 和 getter。

那么問題來了, 模塊化+命名空間之后, 數(shù)據(jù)都是相對獨立的, 如果想在模塊 A 調(diào)用模塊 B 的state, actions, mutations, getters, 該腫么辦?

假設(shè)有這么兩個模塊:

模塊A:

import api from '~api'

const state = {
  vip: {},
}

const actions = {
  async ['get']({commit, state, dispatch}, config = {}) {
    try {
      const { data: { code, data } } = await api.post('vip/getVipBaseInfo', config)
      if (code === 1001) commit('receive', data)
    } catch(error) { console.log(error) }
  }
}

const mutations = {
  ['receive'](state, data) {
    state.vip = data
  }
}

const getters = {
  ['get'](state) {
    return state.vip
  },
}

export default {
  namespaced: true,
  state,
  actions,
  mutations,
  getters
}

模塊B:

import api from '~api'

const state = {
  shop: {},
}

const actions = {
  async ['get']({commit, state, dispatch}, config = {}) {
    try {
      const { data: { code, data } } = await api.post('shop/getShopBaseInfo', config)
      if (code === 1001) commit('receive', data)
    } catch(error) { console.log(error) }
  }
}

const mutations = {
  ['receive'](state, data) {
    state.shop = data
  }
}

const getters = {
  ['get'](state) {
    return state.shop
  },
}

export default {
  namespaced: true,
  state,
  actions,
  mutations,
  getters
}

假設(shè)模塊 B 的 actions 里, 需要用模塊 A 的 state 該怎么辦?

const actions = {
  async ['shop'](store, config = {}) {
    const { commit, dispatch, state, rootState } = store
    console.log(rootState) // 打印根 state
    console.log(rootState.vip) // 打印其他模塊的 state
    try {
      const { data: { code, data } } = await api.post('shop/getShopBaseInfo', config)
      if (code === 1001) commit('receive', data)
    } catch(error) { console.log(error) }
  }
}

我們來看下上面的代碼, actions 中的 shop 方法, 有 2 個參數(shù), 第一個是 store, 第二個是 dispatch 調(diào)用時傳過來的參數(shù)

store 這個對象又包含了 4 個鍵, 其中 commit 是調(diào)用 mutations 用的, dispatch 是調(diào)用 actions 用的, state 是當前模塊的 state, 而 rootState 是根 state,

既然能拿到根 state, 想取其他模塊的 state 是不是就很簡單了...?

假設(shè)模塊 B 的 actions 里, 需要調(diào)用模塊 A 的 actions 該怎么辦?

const actions = {
  async ['shop'](store, config = {}) {
    const { commit, dispatch, state, rootState } = store
    try {
      const { data: { code, data } } = await api.post('shop/getShopBaseInfo', config, 'get')
      if (code === 1001) commit('receive', data) // 調(diào)用當前模塊的 mutations
      dispatch('vip/get', {}, {root: true}) // 調(diào)用其他模塊的 actions
    } catch(error) { console.log(error) }
  }
}

上面的代碼中dispatch('vip/vip', {}, {root: true})就是在模塊 B 調(diào)用模塊 A 的 actions,

有 3 個參數(shù), 第一個參數(shù)是其他模塊的 actions 路徑, 第二個是傳給 actions 的數(shù)據(jù), 如果不需要傳數(shù)據(jù), 也必須預留, 第三個參數(shù)是配置選項, 申明這個 acitons 不是當前模塊的

假設(shè)模塊 B 的 actions 里, 需要調(diào)用模塊 A 的 mutations 該怎么辦?

const actions = {
  async ['shop'](store, config = {}) {
    const { commit, dispatch, state, rootState } = store
    try {
      const { data: { code, data } } = await api.post('shop/getShopBaseInfo', config)
      if (code === 1001) commit('receive', data) // 調(diào)用當前模塊的 mutations
      commit('vip/receive', data, {root: true}) // 調(diào)用其他模塊的 mutations
    } catch(error) { console.log(error) }
  }
}

上面的代碼中commit('vip/receive', {}, {root: true})就是在模塊 B 調(diào)用模塊 A 的 mutations,

有 3 個參數(shù), 第一個參數(shù)是其他模塊的 mutations 路徑, 第二個是傳給 mutations 的數(shù)據(jù), 如果不需要傳數(shù)據(jù), 也必須預留, 第三個參數(shù)是配置選項, 申明這個 mutations 不是當前模塊的

假設(shè)模塊 B 的 actions 里, 需要用模塊 A 的 getters 該怎么辦?

const actions = {
  async ['shop'](store, config = {}) {
    const { commit, dispatch, state, rootState, rootGetters } = store
    console.log(rootGetters['vip/get']) // 打印其他模塊的 getters
    try {
      const { data: { code, data } } = await api.post('shop/getShopBaseInfo', config)
      if (code === 1001) commit('receive', data)
    } catch(error) { console.log(error) }
  }
}

我們來看下上面的代碼, 相比之前的代碼, store 又多了一個鍵: rootGetters

rootGetters 就是 vuex 中所有的 getters, 你可以用 rootGetters['xxxxx'] 來取其他模塊的getters

以上這篇vuex 多模塊時模塊內(nèi)部的mutation和action的調(diào)用方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: