前言

没错,我又来水文章了,Vue的简单Store其实比React的简单Store更早就制作好了并已用在了XK-Editor@1.3.0上,只是没有写到博客上而已,这次正好写了React的简单Store,顺便就把Vue的也补上。至于为什么要用Store或者为什么不用Vuex,其实和React的差不多,这里就不说了,如果不了解可以移步上一篇 为React添加简单的Store

分析

Vue的简单Store和React的差不多,只是React改变State的叫Reduce,Vue叫Mutation,同样简单Store并不需要这部分来增加代码的复杂性,在Vue的官方文档的状态管理中有说明如何创建一个简单的Store,但是那个例子并不够完整,而且需要挂载到根节点data中,访问也过于复杂需要使用this.$root.shareState冗长的访问方式,所以我们需要改进这部分来提高Store的实用性。参照Vuex的使用方式我们可以同Vuex一样添加mapStatemapActions来进行简单的调用,由于Vue提供了Vue.observable的方法来创建响应式数据,所以我们就不需要将Store挂载到根组件,而是可以和组件分离独立的工作。

实现

首先,我们需要引入Vue,同时初始化State和Actions

import Vue from "vue";

const state = Vue.observable({
    count: 0
});

const actions = {
    addCount() {
        // 由于已经使用了Vue.observable来初始化State,所以这时的State已经拥有响应式,所以可以直接对其进行修改
        state.count++;
    }
}

const store = {
  state,
  actions
};

export default store;

然后我们需要编写对应的map方法,同时将map方法导出

export const mapState = states => {
  let ret = {};
  if (states instanceof Array) {
    for (let i = 0; i < states.length; i++) {
      ret[states[i]] = {
        get() {
          return store.state[states[i]];
        },
        set(value) {
          store.state[states[i]] = value;
        }
      };
    }
  } else {
    for (const key in states) {
      if (states[key] instanceof Function) {
        ret[key] = {
          get() {
            return states[key](store.state);
          }
        };
      } else {
        ret[key] = {
          get() {
            return store.state[states[key]];
          },
          set(value) {
            store.state[states[key]] = value;
          }
        };
      }
    }
  }
  return ret;
};

export const mapActions = actions => {
  let ret = {};
  if (actions instanceof Array) {
    for (let i = 0; i < actions.length; i++) {
      ret[actions[i]] = store.actions[actions[i]];
    }
  } else {
    for (const key in actions) {
      if (actions[key] instanceof Function) {
        ret[key] = actions[key](store.actions);
      } else {
        ret[key] = store.actions[actions[key]];
      }
    }
  }
  return ret;
};

由于该Store制作较早,所以并没有考虑到添加打印State变动,如有需要可以参考React的方式添加debug输出。

那么,如何使用呢?

同Vuex的使用方式,在对应的组件中导入Store的map方法,然后就可以同Vuex一样对State和Actions进行操作了

import { mapState, mapActions } from "./store";

export default {
  computed: {
    ...mapState([
      "count"
    ])
  },
  methods: {
    ...mapActions(["addCount"])
  }
}
说点什么
本博客评论规则(评论规则什么的都是浮云,小声
支持Markdown语法
在"为Vue添加简单的Store"已有1条评论
Loading...