在项目中，有时候状态管理可能会有多个，方便模块之间的管理，vuex中的modules就能实现这样的功能
1、modules中的state
store.js
import Vuex from 'vuex'
import defaultState from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'
import actions from './actions/actions'
const isDev = process.env.NODE_ENV === 'develpment';
export default () => {
return new Vuex.Store({
strict: isDev , // 规范开发，禁止在非mutations内修改data的数据,正式环境改为false
state: defaultState,
mutations,
getters,
actions,
modules: {
a: {
state: {
text: '我是a模块'
}
},
b: {
state: {
text: '我是b模块'
}
}
}
})
}
app.vue
computed:{
textA: function () {
return this.$store.state.a.text
},
textB: function () {
return this.$store.state.b.text
},
// 辅助函数1
...mapState({
textC : (state) => state.a.text
}),
辅助函数2
...mapState('a', {
textC: state => state.textC,
}),
辅助函数3：
// 引入createNamespacedHelpers
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('a')
...mapState({
textC: state => state.textC,
}),
}
2、mutations
import Vuex from 'vuex'
import defaultState from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'
import actions from './actions/actions'
const isDev = process.env.NODE_ENV === 'develpment';
export default () => {
return new Vuex.Store({
strict: isDev , // 规范开发，禁止在非mutations内修改data的数据,正式环境改为false
state: defaultState,
mutations,
getters,
actions,
modules: {
a: {
state: {
text: '我是a模块'
},
mutations: {
updateText: function (state, text) {
console.log('a.state', state)
state.text = text; // 这的statez是a模块中的state
}
}
},
b: {
state: {
text: '我是b模块'
}
}
}
})
}
app.vue
methods: {
...mapMutations([ 'updateText'])
},
这种调用mutations的方法，mutations里面的方法名不能重复，如果想在不同的模块定义不同的名字，在每个
模块中设置namespace,让这个模块拥有独立的作用域
import Vuex from 'vuex'
import defaultState from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'
import actions from './actions/actions'
const isDev = process.env.NODE_ENV === 'develpment';
export default () => {
return new Vuex.Store({
strict: isDev , // 规范开发，禁止在非mutations内修改data的数据,正式环境改为false
state: defaultState,
mutations,
getters,
actions,
modules: {
a: {
namespaced: true, // 让a模块形成独立的作用域
state: {
text: '我是a模块'
},
mutations: {
updateText: function (state, text) {
console.log('a.state', state)
state.text = text;
}
}
},
b: {
state: {
text: '我是b模块'
}
}
}
})
}
app.vue
<template>{{textPlus}}</template>
methods: {
...mapGetters({
'textPlus': 'a/textPlus'
}) // 获取getter中的数据
},
3、getters
store.js
import Vuex from 'vuex'
import defaultState from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'
import actions from './actions/actions'
const isDev = process.env.NODE_ENV === 'develpment';
export default () => {
return new Vuex.Store({
strict: isDev , // 规范开发，禁止在非mutations内修改data的数据,正式环境改为false
state: defaultState,
mutations,
getters,
actions,
modules: {
a: {
namespaced: true, // 让a模块形成独立的作用域
state: {
text: '我是a模块'
},
mutations: {
updateText: function (state, text) {
console.log('a.state', state)
state.text = text;
}
},
getters: {
// 第一个参数是当前模块的state，第二个参数是当前模块的getters,rootState全局的state
textPlus: function (state, getters, rootState) {
return state.text + rootState.b.text
}
}
},
b: {
state: {
text: '我是b模块'
},
getters:{
textPlulsB:function (state) {
return state.text+'我是b模块的getters'
}
}
}
}
})
}
关键代码
getters: {
// 第一个参数是当前模块的state，第二个参数是当前模块的getters,rootState全局的state
textPlus: function (state, getters, rootState) {
return state.text + rootState.b.text
}
}
app.vue
<template>{{textPlus}}</template>
methods: {
...mapGetters({
'textPlus': 'a/textPlus'
}) // 获取getter中的数据
},
注意：1、模块getters的函数接受3个参数/第一个参数是当前模块的state，第二个参数是当前模块的getters,rootState全局的state
4、actions
import Vuex from 'vuex'
import defaultState from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'
import actions from './actions/actions'
const isDev = process.env.NODE_ENV === 'develpment';
export default () => {
return new Vuex.Store({
strict: isDev , // 规范开发，禁止在非mutations内修改data的数据,正式环境改为false
state: defaultState,
mutations,
getters,
actions,
modules: {
a: {
namespaced: true, // 让a模块形成独立的作用域
state: {
text: '我是a模块'
},
mutations: {
updateText: function (state, text) {
console.log('a.state', state)
state.text = text;
}
},
getters: {
// 第一个参数是当前模块的state，第二个参数是当前模块的getters,rootState全局的state
textPlus: function (state, getters, rootState) {
return state.text + rootState.b.text
}
},
actions: {
add ({state, commit, rootState}) {
commit('updateText', rootState.a.text + '我是a的actions')
}
}
},
b: {
state: {
text: '我是b模块'
},
getters:{
textPlulsB:function (state) {
return state.text+'我是b模块的getters'
}
}
}
}
})
}
关键代码
actions: {
add ({state, commit, rootState}) {
commit('updateText', rootState.a.text + '我是a的actions')
}
}
app.vue
methods: {
...mapActions(['updateCountAsync', 'a/add']),
},
mounted:function(){
this[ 'a/add']()
}
注意：
1、调用当前mutations
add ({state, commit, rootState}) {
commit('updateText', rootState.a.text + '我是a的actions')
}
参数一个这个模块的对象，包含当前模块的state，当前模块的commit（commit会在当前模块寻找）、和rootS塔特（全局的state）
2、在内部调用外部全局的mutations
b: {
state: {
text: '我是b模块'
},
getters:{
textPlulsB:function (state) {
return state.text+'我是b模块的getters'
}
},
actions: {
addB ({ commit}) {
commit('a/updateText' ,'我是b的action', {root:true})
}
}
}
添加{root: true}
methods: {
...mapActions(['addB'])
},
mounted:function(){
this.addB();
}
因为在b模块中没有设置namespaced独立作用域，而且名字是唯一，所以在调用的时候，可以不用写
['b.addB']
也可以写成以下模式
b: {
namespaced: true, // 让a模块形成独立的作用域
state: {
text: '我是b模块'
},
getters:{
textPlulsB:function (state) {
return state.text+'我是b模块的getters'
}
},
actions: {
addB ({ commit}) {
commit('a/updateText' ,'我是b的action', {root:true})
}
}
}
methods: {
...mapActions(['b/addB'])
},
mounted:function(){
this['b/addB']();
}
如果设置了namespace，在调用其它模块的mutation时候，必须要设置{root:true}
动态注册模块
const store = createStore()
// 动态添加模块
index.js中
store.registerModule('c' ,{
state: {
text:'我是c模块'
}
}
)
解绑一个module
store.unregisterModule('c')
app.vue
...mapState({
textcc:(state) =>state.c.text
}),
网友评论