vuex 多模块时 模块内部的mutation和action的调用方式
83 浏览量
2020-11-20
01:29:41
上传
评论
收藏 86KB PDF 举报
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: {}
}
评论0
最新资源