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

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

定义状态

src/suite-vendor/test-party/modules/test-party/front/src/store.js

  1. 1export default function(Vue) {
  2. 2
  3. 3  return {
  4. 4    state: {
  5. 5      message: 'hello world',
  6. 6    },
  7. 7    getters: {
  8. 8      message2(state) {
  9. 9        return state.message + '!';
  10. 10      },
  11. 11    },
  12. 12    mutations: {
  13. 13      setMessage(state, message) {
  14. 14        state.message = message;
  15. 15      },
  16. 16    },
  17. 17    actions: {
  18. 18      getMessage({ state, commit }) {
  19. 19        return new Promise((resolve, reject) => {
  20. 20          const data = 'test for dispatch';
  21. 21          commit('setMessage', data);
  22. 22          resolve(data);
  23. 23        });
  24. 24      },
  25. 25    },
  26. 26  };
  27. 27
  28. 28}

使用状态

模块内部使用

  1. 1testModuleCurrent() {
  2. 2  // state
  3. 3  const message = this.$local.state.message;
  4. 4  // getters
  5. 5  const message2 = this.$local.getters('message2');
  6. 6  // mutations
  7. 7  this.$local.commit('setMessage', 'test for commit');
  8. 8  // actions
  9. 9  this.$local.dispatch('getMessage').then(data => {
  10. 10    console.log(data);
  11. 11  });
  12. 12},

跨模块使用

  1. 1testModuleOther() {
  2. 2  this.$meta.module.use('test-party', module => {
  3. 3    // state
  4. 4    const message = this.$store.getState('test/party/message');
  5. 5    // getters
  6. 6    const message2 = this.$store.getters['test/party/message2'];
  7. 7    // mutations
  8. 8    this.$store.commit('test/party/setMessage', 'test for commit');
  9. 9    // actions
  10. 10    this.$store.dispatch('test/party/getMessage').then(data => {
  11. 11      console.log(data);
  12. 12    });
  13. 13  });
  14. 14},