Vuex is a state management mechanism developed for Vue
applications. EggNornJS also provides the module isolation
mechanism to the state management
- Module can specify its own
state management
- The system automatically assigns a
namespace
to each module, so as to register thestate management object
of this module into the specifiednamespace
Definition of State
src/suite-vendor/test-party/modules/test-party/front/src/store.js
export default function(Vue) {
return {
state: {
message: 'hello world',
},
getters: {
message2(state) {
return state.message + '!';
},
},
mutations: {
setMessage(state, message) {
state.message = message;
},
},
actions: {
getMessage({ state, commit }) {
return new Promise((resolve, reject) => {
const data = 'test for dispatch';
commit('setMessage', data);
resolve(data);
});
},
},
};
}
Usage of State
Same Module
testModuleCurrent() {
// state
const message = this.$local.state.message;
// getters
const message2 = this.$local.getters('message2');
// mutations
this.$local.commit('setMessage', 'test for commit');
// actions
this.$local.dispatch('getMessage').then(data => {
console.log(data);
});
},
Across Module
testModuleOther() {
this.$meta.module.use('test-party', module => {
// state
const message = this.$store.getState('test/party/message');
// getters
const message2 = this.$store.getters['test/party/message2'];
// mutations
this.$store.commit('test/party/setMessage', 'test for commit');
// actions
this.$store.dispatch('test/party/getMessage').then(data => {
console.log(data);
});
});
},
Comments: