vue系列--60行代码实现一个简易版的Vuex

一个简单的Vuex实现

回忆一下vuex的一些使用方式,包括:

// $store的方式
this.$store.state.xxx
this.$store.getters.xxx
this.$store.commit('MutationName', data)
this.$store.dispatch('ActionName', data)

// map的方式
computed: {
  ...mapState(['StateName']),
  ...mapGetters(['GetterName'])
}

methods: {
  ...mapMutations(['MutationName']),
  ...mapActions(['ActionName'])
}

实现一个简单的vuex

  1. 写install方法,注册插件,引入Vue,并使用mixin在beforeCreate生命周期里给Vue的原型挂载对象
  2. 定义Store类,将传入的state使用Vue实现响应式
  3. 实现commit方法,即调用mutations的方法,使用响应式的state入参即可
  4. 实现dispatch方法,即调用并返回actions的方法,使用响应式的state入参即可
  5. 实现getters,利用Object.keys遍历传入的getters的key,再利用Object.defineProperty实现get方法
let Vue;

// install方法注册插件
function install(_Vue) {
  Vue = _Vue;

  Vue.mixin({
    beforeCreate() {
      if (this.$options.simplestore) {
        Vue.prototype.$simplestore = this.$options.simplestore;
      }
    }
  });
}

class Store {
  constructor(options) {
    this.state = new Vue({
      data: options.state
    });

    this.mutations = options.mutations;
    this.actions = options.actions;

    options.getters && this.initGetters(options.getters);
  }

  commit = (key, ...data) => {
    const fn = this.mutations[key];
    if (fn) {
      fn(this.state, ...data);
    }
  }

  dispatch = (key, ...data) => {
    const fn = this.actions[key];
    if (fn) {
      return fn({ commit: this.commit, state: this.state }, ...data);
    }
  }

  initGetters(getters) {
    this.getters = {};

    Object.keys(getters).forEach(key => {
      Object.defineProperty(this.getters, key, {
        get: () => {
          return getters[key](this.state);
        }
      })
    })
  }
}

export default {
  install,
  Store
}

源码在github,在src/simple-vuex/index.js,演示在/src/components/simple-vuex-demo.vue里

原文链接:segmentfault.com

上一篇:vue 插槽
下一篇:totop返回顶部

相关推荐

官方社区

扫码加入 JavaScript 社区