Vuex

首先回顾基础示例，模拟实现一个 Vuex 实现同样的功能

import Vue from 'vue' 
import Vuex from 'vuex' 
Vue.use(Vuex)
export default new Vuex.Store({
  state: { 
  	count: 0, 
  	msg: "Hello World" 
  },
  getters: {
    reverseMsg(state) {
      return state.msg.split("").reverse().join("");
    },
  },
  mutations: {
    increate(state, payload) {
      state.count += payload.num;
    },
  },
  actions: {
    increate(context, payload) {
      setTimeout(() => {
        context.commit("increate", { num: 5 });
      }, 2000);
    },
  },
});

实现思路

Vuex下拥有install方法和Store类。即创建一个Vuex的模块，这个模块导出install方法和Store类。

实现 install 方法

Vuex 是 Vue 的一个插件，所以先实现 Vue 插件约定的 install 方法。
Vue.use内部会调用Vuex对象的install方法。
install作用：在install中把创建Vue根实例时传入的store对象注入到Vue实例原型上的$store中。这样，在所有组件中可以通过this.$store获取到Vuex中的仓库，从而可以在所有组件中共享状态。

实现 Store 类

首先store是一个类，它的构造函数接受一个对象作为参数，这个对象中的属性就是我们熟悉的 state、getters、mutations、actions。（这里简单模拟）

实现构造函数，接收options。
state的响应话处理。
getterr的实现。
commit、dispatch方法。

实现

目录结构
---- myvuex
------ index.js

index.js

let _Vue = null;

class Store {
  constructor(options) {
    const { state = {}, getters = {}, mutations = {}, actions = {} } = options;

    this.state = _Vue.observable(state);

    // 此处不直接 this.getters = getters，会产生死递归
    this.getters = Object.create(null);
    Object.keys(getters).forEach((key) => {
      Object.defineProperty(this.getters, key, {
      	// 箭头函数 返回通过key在getters中获取到的方法的执行 结果
        get: () => getters[key](this.state), // 这里是state如何传到getters中的
      });
    });
	// mutations actions都是内部属性，不希望外部直接访问到
    this._mutations = mutations;
    this._actions = actions;
  }

  commit(type, payload) {
    this._mutations[type](this.state, payload);
  }

  dispatch(type, payload) {
    this._actions[type](this, payload);
  }
}

function install(Vue) {
  _Vue = Vue;
  // 在install中不能直接获取Vue实例，可以通过混入beforeCreate来获取Vue实例
  // 从而拿到选项中的store对象
  _Vue.mixin({
    beforeCreate() {
      if (this.$options.store) {
        Vue.prototype.$store = this.$options.store;
      }
    },
  });
}

// 导出模块
export default {
  Store,
  install,
};