vuex 多模块时 模块内部的mutation和action的调用方式

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

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

vuex 多模块时 模块内部的mutation和action的调用方式_第1张图片 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)的时候,在组件内是怎么调用的,市里代码如下:







执行代码的截图如下:

vuex 多模块时 模块内部的mutation和action的调用方式_第2张图片

可以看到,我在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子模块内相对应的方法名,是可以修改到自身state中的属性的。

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

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

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

你可能感兴趣的:(vue学习)