Vuex是一个专为Vue应用程序开发的状态管理模式。EggBornJS采用Vuex实现了完全隔离的模块状态管理机制

  1. 模块可以单独实现自己的状态管理
  2. 系统自动为每个模块分配命名空间,从而将此模块的状态管理对象注册到全局命名空间

定义状态

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

}

使用状态

模块内部使用

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

跨模块使用

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