状态管理

2018-11-26 10:07:18

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

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

定义状态管理

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

}

使用状态管理

模块内部使用

// state
const message = this.$local.state.message;
console.log(message);
// getters
const message2 = this.$local.getters('message2');
console.log(message2);
// mutations
this.$local.commit('setMessage', 'test for commit');
console.log(this.$local.getters('message2'));
// actions
this.$local.dispatch('getMessage').then(data => {
  console.log(data);
  console.log(this.$local.getters('message2'));
});

跨模块使用

this.$meta.module.use('test-todo', module => {
  // state
  const message = this.$store.state.test.todo.message;
  console.log(message);
  // getters
  const message2 = this.$store.getters['test/todo/message2'];
  console.log(message2);
  // mutations
  this.$store.commit('test/todo/setMessage', 'test for commit');
  console.log(this.$store.getters['test/todo/message2']);
  // actions
  this.$store.dispatch('test/todo/getMessage').then(data => {
    console.log(data);
    console.log(this.$store.getters['test/todo/message2']);
  });
});


评论: