对于vuex在每个组件如何做到数据统一的思考？

第一步：先看看vuex是如何挂载到每一个组件的。

1、一般我们会在main.js引入我们封装的store，挂载到vue实例上

import store from './store';

new Vue({

  router,

  store,

  render: (h) => h(App)

}).$mount('#app');

2、在store.js中我们会用Vue.use使用我们的vuex插件，因为vue.js 暴露一个 install 方法，所以我们去看看vuex的install方法做了什么。

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {},

  mutations: {},

  actions: {},

  modules: {}

})

3、我们此次看的是vuex v3.5.1版本的源码，会发现去执行了applyMixin方法

在applyMixin方法里面会发现判断下vue版本号，如果在2以上的版本会调用Vue.mixin方法在beforeCreate生命周期全局混入vuexInin方法，

在这个方法里面拿到this.$options，取到的值vue实例里面的配置。

判断值里面有没有store，如果有赋值到this.$store里面。如果没有就从父级对象取。

通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。

 

 

第二步：再看看store中的state和getters是如何响应的

在659行我们找到resetStoreVM方法。

通过遍历wrappedGetters属性添加到computed中实行监听，store中的state作为store._vm.data.$$state的值，state也变成了响应式的。