利用Vue.observable实现简易的Vuex

1、搭架子

首先把大致的架子搭好。

let Vue;
let _self;

class Store {
   
	constructor(state, getters, mutations, actions) {
   }

	commit(cb, ...args) {
   }

	dispatch(cb, ...args) {
   }

	static install(_Vue, storeName = "store") {
   }
}

export default Store;

2、注入Vue构造函数

这块很简单，主要利用当调用Vue.use()的时候，Vue会自动调用传进参数的install方法，如果传进来的是个函数则直接把这个函数当做install方法。然后install方法的第一个参数就是Vue构造函数。通过这种方式就可以获取到Vue。

static install(_Vue, storeName = "store") {
   
	Vue = _Vue; // 保存备用
	// 为了能够将Store实例挂载到Vue原型上，先将生成的Store实例挂载在根实例上
	// 再通过全局混入得到根实例，则可拿到Store实例
	Vue.mixin({
   
		beforeCreate() {
   
			const store = this.$options[storeName];
			if (store) {
   
				// 只在根实例上做一次赋值操作即可
				Vue.prototype[`$${
     storeName}`] = store;
				// 保存store备用
				_self = store;
			}
		}
	});
}

3、初始化并声明commit和dispatch

这块其实很简单，无非是要调用函数修改state里面的值而已。

constructor({
     state, getters, mutations, actions }) {
   
	this.state = state || {
   };
	this.mutations = mutations || {
   };
	this.actions = actions || {
   };
	this.getters = {
   }; // getters情况特殊一点，暂时这么写
}

commit(cb, ...args) {