广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
18720358503

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

微信小程序普遍难题_vuex 多模块时 模块内部的

日期:2021-01-05 浏览:
vuex 多模块时 模块内部的mutation和action的调用方式       这篇文章主要介绍了vuex 多模块时 模块内部的mutation和action的调用方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

vue在做大型项目时,会用到多状态管理,vuex允许我们将store分割成多个模块,每个模块内都有自己的state、mutation、action、getter。模块内还可以继续嵌套相对应的子模块。

为了巩固我自己对store多模块的一些基本认识,写了个简单的多模块实例,下图为我自己创建的store的目录结构,modules文件夹内的模块,在实际项目中还可以继续分开类似store目录下的多文件结构,也就是单独的模块文件夹,方便后期修改。

store目录结构

./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

估计看到这里,你会发现modulesA和modulesB的区别就是有无namespaced这个属性。在vuex内,模块内部的action、mutation、getter都会被注册在全局命名空间内,俗话就是注册成全局的,这样做的结果就是在调用相对应的名字的的action或者mutation或者getter的时候,所有同名的都将会被响应。让我们来看看当没有namespaced(或者值为false)的时候,在组件内是怎么调用的,代码如下:

 template 
 div 
 h1 {{ msg }} /h1 
 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.$mit('UPDATE_LOGIN_STATUS')
 }, 1000)
 setTimeout(() = {
 this.$mit('UPDATE_TO_VIP1')
 // this.$store.dispatch('getVip1')
 }, 2000)
 setTimeout(() = {
 // this.$mit('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 ponent only -- 
 style scoped 
 /style 

执行代码的截图如下:

mit一个UPDATE_LOGIN_STATUS,mit了UPDATE_TO_VIP1和3s的时候dispatch了一个事件CANCEL_VIP1,将modulesA的isVip1的值从false = true = mit或者dispatch子模块内相对应的方法名,是可以修改到自身state中的属性的。

如果namespaced的值为true时,那么就是开启了命名空间模块,调用子模块的getter、mutation、getter的时候就跟之前不一样了,vuex它内部会自动根据模块注册的路径调整命名,比如要dispatch B中的一个action的话,那么组件内的调用就应该是如下这样的:

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

this.$mit('modulesB/UPDATE_TO_VIP2')

日常项目中,在store有多个状态需要管理的时候,一般来说是应该要开启namespaced的,这样子能够使我们的代码能够有更强的封装性以及更少的耦合。

补充知识:Vuex 模块化+命名空间后, 如何调用其他模块的 state, actions, mutations, getters

由于 Vuex 使用了单一状态树,应用的所有状态都包含在一个大对象中。那么,随着应用的不断扩展,store 会变得非常臃肿。

为了解决这个问题,Vuex 允许我们把 store 分 module(模块)。每一个模块包含各自的状态、mutation、action 和 getter。

那么问题来了, 模块化+命名空间之后, 数据都是相对独立的, 如果想在模块 A 调用 模块 B 的state, actions, mutations, getters, 该肿么办

假设有这么两个模块:

模块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

假设模块 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 个参数, 第一个是 store, 第二个是 dispatch 调用时传过来的参数

store 这个对象又包含了 4 个键, 其中 commit 是调用 mutations 用的, dispatch 是调用 actions 用的, state 是当前模块的 state, 而 rootState 是根 state,

既然能拿到根 state, 想取其他模块的 state 是不是就很简单了...

假设模块 B 的 actions 里, 需要调用模块 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) // 调用当前模块的 mutations
 dispatch('vip/get', {}, {root: true}) // 调用其他模块的 actions
 } catch(error) { console.log(error) }
}

上面的代码中dispatch('vip/vip', {}, {root: true})就是在模块 B 调用 模块 A 的 actions,

有 3 个参数, 第一个参数是其他模块的 actions 路径, 第二个是传给 actions 的数据, 如果不需要传数据, 也必须预留, 第三个参数是配置选项, 申明这个 acitons 不是当前模块的

假设模块 B 的 actions 里, 需要调用模块 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) // 调用当前模块的 mutations
 commit('vip/receive', data, {root: true}) // 调用其他模块的 mutations
 } catch(error) { console.log(error) }
}

有 3 个参数, 第一个参数是其他模块的 mutations 路径, 第二个是传给 mutations 的数据, 如果不需要传数据, 也必须预留, 第三个参数是配置选项, 申明这个 mutations 不是当前模块的

假设模块 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 多模块时 模块内部的mutation和action的调用方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。




新闻资讯

联系方式丨CONTACT

  • 全国热线:18720358503
  • 传真热线:18720358503
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系