Vuex与Vuex-Class的底层原理简单实现

vuex-class是在class-component中使用vuex的辅助工具。

学习任何技术栈的使用，最透彻的掌握方法就是去简单实现一下，下面先简单实现一下vuex，然后基于我们自己实现的vuex再去实现一个vuex-class，彻底搞定vuex-class的使用。

首先回忆一下vuex的使用（配置）方法，首先我们需要在某个位置执行Vue.use(Vuex)，然后通过new Vuex.Store的方式创建一个Store实例，在实例化Vue时将其传入配置对象：new Vue({store})。

src/store/index.js：

import Vue from 'vue';
import Vuex from 'vuex';
​
Vue.use(Vuex);
​
export default new Vuex.Store({
    state: {
        count: 0
    }
})

main.js：

import Vue from 'vue'
import App from './App.vue'
import store from './store'
​
Vue.config.productionTip = false
​
new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

经过如上的配置，我们就可以在组件中通过this.$store.xxx去访问Store对象的属性，使用state、commit…

为了保留核心，删繁就简，我们自己的vuex只实现在组件中通过this.$store.state访问响应式state的能力。

实现vuex

思路分析

因为vue2中的组件其实就是一个对象，整个项目以App.vue作为根组件，与所有子组件构成了一个巨大的组件树，说白了就是一个对象树，并且基于当前组件对象可以通过$parent等属性访问组件树的相邻（父）组件。

那么我们既然要让所有组件都可以通过$store属性访问到store对象，那么就是很单纯的给所有组件都加一个$store属性就好了。

实现切入点

借助Vue的插件机制：Vue.use方法可以接收一个对象，并执行这个对象的install方法，Vue构造函数将作为install的参数，我们可以在install<