X-BUILD

状态管理

如果你使用过 Vuex 那么恭喜你，可以很快的上手 X-BUILD 自带的状态管理，它是一个阉割版的 Vuex，仅保留了 State、Mutation、Action 的功能，另外提供了 watch 方法用于监听状态变化。

快速上手

通过 npm 安装 buildx 或在 X-BUILD 初始化时选择状态管理选项。

创建 store.js

import BuildX from 'buildx';

const params = {
  state: {
    name: 'codexu'
  },
  mutations: {
    setName(state, payload) {
      state.name = payload;
    }
  },
  actions: {
    getName(store) {
      setTimeout(() => {
        store.commit('setName', 'dispatch name');
      }, 1000);
    }
  }
};

export default new BuildX(params);

在其他 js 中引入 store 实例，可以通过 commit 或 dispatch 改变 state， 通过 watch 监听 state 变化。

import store from './store';

store.watch('name', value => console.log(value));

store.commit('setName', 'commit name');
store.dispatch('getName');

配置参数

mutations、 actions 用法相似，mutations 用于同步，actions 用于异步，actions 通过调用 commit 提交给 mutations 再修改 state 属性。

mutations

mutations 是一个对象，每一个属性必须是一个函数，函数有两个属性 state 与 payload。

state: 指向实例的 state，用于修改属性的值。

payload: 通过 commit 方式传过来的值。

actions

actions 是一个对象，每一个属性必须是一个函数，函数有两个属性 store 与 payload。

store: 指向实例，可以通过 store.commit 提交 mutations 修改 state 的值。

payload: 通过 dispatch 方式传过来的值。

实例方法

commit(mutationKey, payload)

mutationKey: 传入你要执行的 mutation。

payload: 可以传递一些参数。

dispatch(actionKey, payload)

actionKey: 传入你要执行的 action。

payload: 可以传递一些参数。

watch(stateKey, callback)

stateKey: 传入你要监听的 state key。

callback: 当 stateKey 发生改变时会触发此函数。

← 规范 →