Vuex模塊化用法?跨模塊調(diào)用的方式

更新時(shí)間：2023年10月26日 09:22:47 作者：小楊闖關(guān)之情迷代碼

這篇文章主要介紹了Vuex模塊化用法?跨模塊調(diào)用的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,

準(zhǔn)備

為了說明這個(gè)問題，我們來一起實(shí)現(xiàn)一個(gè)小需求

即現(xiàn)在有兩個(gè)module - product 和 user

需求為調(diào)用 product 模塊的方法去修改 user 模塊的 userInfo（用戶名信息）

// module user 模塊
const user = {
	state: {
		userInfo: '鳴人', // 用戶信息
	},
	mutations:{
		SET_UserInfo(state,payload) {
			state.userInfo = payload.userInfo
		},
	},
	actions: {
		setuserInfo(context,payload) {
			return new Promise(resolve => {
				context.commit('SET_UserInfo',payload)
				resolve();
			})
		},
	}
}

export default user

不難看出，上述需求其實(shí)就是在 product 模塊的方法中的去調(diào)用 user模塊的 setuserInfo 方法

那我們來看看 product 模塊

const product = {
	actions: {
		callsetuserInfo(context,payload) {
                // 在這里調(diào)用 user 模塊的 setuserInfo 方法
		},
	}
}

export default product

接著就是注冊(cè)這兩個(gè)模塊：

import Vue from 'vue'
//引用Vuex
import Vuex from 'vuex'
Vue.use(Vuex)

import product from '@/store/modules/product'
import user from '@/store/modules/user'
// import  getters from '@/store/modules/getters.js'
// import  actions from '@/store/modules/actions.js'



//實(shí)例store對(duì)象
const store = new Vuex.Store({
	modules: {
		product,
		user
		// getters,
		// actions
	}
})

//導(dǎo)出store對(duì)象
export default store

跨模塊調(diào)用state

這里我們首先要了解方法中的第一個(gè)參數(shù) context

打印一下

發(fā)現(xiàn)有 commit,dispatch,getters,rootGetters,rootState 幾個(gè)參數(shù)

結(jié)合官網(wǎng)說明：

同樣，對(duì)于模塊內(nèi)部的 action，局部狀態(tài)通過 context.state 暴露出來，根節(jié)點(diǎn)狀態(tài)則為 context.rootState

即： context.state -> 訪問的是當(dāng)前模塊下的 state

context.rootState -> 是根節(jié)點(diǎn)狀態(tài)

const product = {
	actions: {
		callsetuserInfo(context,payload) {                
                // 通過 根節(jié)點(diǎn)狀態(tài) 去訪問 user 模塊的 userInfo信息
                console.log(context.rootState.user.userInfo)  // '鳴人'
		},
	}
}

export default product

跨模塊調(diào)用getter

和跨模塊調(diào)用state類似，通過 context.rootGetters去訪問模塊

namespaced情況區(qū)分

跨模塊調(diào)用mutation,action

這里要區(qū)分模塊是否開啟了命名空間 namespaced

首先來看默認(rèn)情況（沒有開啟namespaced）

官網(wǎng)說明：

默認(rèn)情況下，模塊內(nèi)部的 action 和 mutation 仍然是注冊(cè)在全局命名空間的——這樣使得多個(gè)模塊能夠?qū)ν粋€(gè) action 或mutation 作出響應(yīng)。
Getter同樣也默認(rèn)注冊(cè)在全局命名空間，但是目前這并非出于功能上的目的（僅僅是維持現(xiàn)狀來避免非兼容性變更）。
必須注意，不要在不同的、無命名空間的模塊中定義兩個(gè)相同的getter 從而導(dǎo)致錯(cuò)誤。

跨模塊調(diào)用actions：

// 三個(gè)參數(shù)： 1. 模塊/方法名 2.參數(shù) 3.是否從跟節(jié)點(diǎn)尋找
context.dispatch('需要調(diào)用的方法名',params,{root: true})

跨模塊調(diào)用mutations:

// 三個(gè)參數(shù)： 1. 模塊/方法名 2.參數(shù) 3.是否從跟節(jié)點(diǎn)尋找
context.commit('需要調(diào)用的方法名',params,{root: true})

const product = {
	actions: {
		callsetuserInfo(context,payload) {
                  // 因?yàn)槭悄J(rèn)為全局注冊(cè)  可以直接訪問 setuserInfo  
                  //  {root: true} 表明從根節(jié)點(diǎn)尋找  如果不加 則是從當(dāng)前模塊中
                  //  這里即 product模塊 去找 setuserInfo 方法 （當(dāng)然找不到）
           		contxt.dispatch('setuserInfo',{
				userInfo: '宇智波佐助'
			},{root: true})
		},
	}
}
export default product

在頁面中調(diào)用：

...mapState({
    cartList: state => state.product.cartList,
    userInfo:state => state.user.userInfo,
}),
methods: {
    // 因?yàn)闉槟J(rèn)情況，Action全局注冊(cè)，這里使用輔助函數(shù)直接取值
 ...mapActions( [
   'callsetuserInfo',
 ]),

async onLoad(params) {
    this.callsetuserInfo().then(()=> {
        // 打印user 模塊 的 userInfo
        console.log(this.userInfo) //  宇智波佐助 
    })
}

打印設(shè)置值- 宇智波佐助，默認(rèn)情況（未開啟命名空間）跨模塊調(diào)用actions 成功

跨模塊調(diào)用mutations類似，語法糖改為 context.commit 即可

啟命名空間的情況

官方文檔：

如果希望你的模塊具有更高的封裝度和復(fù)用性，你可以通過添加 namespaced: true的方式使其成為帶命名空間的模塊。
當(dāng)模塊被注冊(cè)后，它的所有 getter、action 及 mutation都會(huì)自動(dòng)根據(jù)模塊注冊(cè)的路徑調(diào)整命名。

例如：

const store = createStore({
  modules: {
    account: {
      namespaced: true,

      // 模塊內(nèi)容（module assets）
      state: () => ({ ... }), // 模塊內(nèi)的狀態(tài)已經(jīng)是嵌套的了，使用 `namespaced` 屬性不會(huì)對(duì)其產(chǎn)生影響
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },

      // 嵌套模塊
      modules: {
        // 繼承父模塊的命名空間
        myPage: {
          state: () => ({ ... }),
          getters: {
            profile () { ... } // -> getters['account/profile']
          }
        },

        // 進(jìn)一步嵌套命名空間
        posts: {
          namespaced: true,

          state: () => ({ ... }),
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})

官網(wǎng)中的在帶命名空間的模塊內(nèi)訪問全局內(nèi)容的例子：

modules: {
  foo: {
    namespaced: true,

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

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

        dispatch('someOtherAction') // -> 'foo/someOtherAction'
        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'

        commit('someMutation') // -> 'foo/someMutation'
        commit('someMutation', null, { root: true }) // -> 'someMutation'
      },
      someOtherAction (ctx, payload) { ... }
    }
  }
}

好了，了解之后。回到我們的需求 = =！

模塊user,product 先 開啟命名空間 如下：

const user = {
	namespaced: true,
     // 后續(xù)代碼
 }

在product模塊中去調(diào)用user 模塊的action方法

const product = {
	actions: {
		callsetuserInfo(context,payload) {
                  // 因?yàn)殚_啟了命名空間  訪問方法 需要通過模塊 user/setuserInfo  
           		context.dispatch('user/setuserInfo',{
				userInfo: '宇智波佐助'
			},{root: true})
		},
	}
}
export default product

在頁面中調(diào)用

 ...mapState({
    cartList: state => state.product.cartList,
    userInfo:state => state.user.userInfo,
}),
methods: {
    // 因?yàn)闉殚_啟命名空間  不能直接訪問方法
    // 普通寫法
   ...mapActions([
   'product/callsetuserInfo',
 ]),  
    // 簡(jiǎn)化寫法：   將模塊的空間名稱字符串作為第一個(gè)參數(shù)傳遞
 ...mapActions('product',[
   'callsetuserInfo',
 ]),
 // 如果想調(diào)用多個(gè)不同命名空間的方法
  ...mapActions('模塊B',[
   '模塊B Function',
 ]),
async onLoad(params) {
    this.callsetuserInfo().then(()=> {
        // 打印user 模塊 的 userInfo
        console.log(this.userInfo) //  宇智波佐助 
    })
}

參考文檔： https://vuex.vuejs.org/zh/guide/modules.html