Question

vuex实现原理

Answer 1

vuex是在每个组件上注入this. store获取共享的状态，定义操作state的方法。
首先使用vue.use(vuex)表明vuex是vue的插件，只能被vue使用——实例化Store并传入参入——Store注入到根组件上。以上三个步骤便可以使用vuex实现数据在组件中的共享了。

当使用到vue.use的时候，会调用Store文件中的install方法，并可以获取到当前组件的执行期上下文。通过全局混合的方式，在每个组件上嵌入this.$store属性。

当Store类被实例化时，会执行constructor构造器并且传入option所需的参数，在对state、getters、mutations、actions编写。
1、实现state：理论上讲，直接把参数中的state赋值当前组件上即可，这样会引发一个问题，state的值无法动态改变。要使用state双向绑定可以直接使用vue实例中data方法，然后在通过get进行属性的截取。

2、实现getters：通过Ojbect.defineProperty监听getters值里面的变化，当获取值的时候，会触发get方法，返回并执行参数getters里面的方法。

3、实现mutations：把参数mutations里面的方法重新用一个变量去接收，作用是防止变量的全局污染。定义commit函数，当被执行时，触发定义mutaion对象里面的方法。

4、实现actions：方法同上，有个地方需要作出微调，传递的参数是当前的执行期上下文。

项目案例