action mutation 调用_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: {

'U