Vuex is a state management mechanism developed for Vue applications. EggNornJS also provides the module isolation mechanism to the state management

  1. Module can specify its own state management
  2. The system automatically assigns a namespace to each module, so as to register the state management object of this module into the specified namespace

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);
    });
  });
},