vlambda博客
学习文章列表

源码分析vuex如何维护多个组件的数据共享

        之前分析了vue组件之间的关系,每个组件都是一个独立的实例,那么涉及到组件之间的通信大概可以分为以下几种情况:

  1. 父子组件的通信:父组件向子组件传递props,子组件向父组件冒泡事件。

  2. 兄弟组件间的通信:子组件先传递事件给父组件,然后再通过父组件传递给另一个子组件。或者通过一个事件总线组件来传递事件。(如果想深入了解可以自行百度,这里就不深入讨论)

  3. 组件关系复杂:将共享的数据抽出来,放到全局。这个用来存放共享数据的唯一数据源,就是vuex中的 Store。

        在分析完子组件渲染流程后,我们从源码中来看一下vuex是如何维护多个组件间的数据共享的。本次分析不会深入分析vuex内部实现,重点在于如何与vue之间配合完成vue多个组件间的状态共享。首先我们先从vuex官方代码example中的用法来看一下vuex是如何应用的:


        在项目的入口文件中,我们引入了store文件夹中的index.js,然后将引入的store作为初始化Vue的一个option元素对vue初始化。



        下面我们来看在store/index.js中vuex具体做了什么。首先引入了vuex,调用vue.use时传入了vuex。最后实例化Vuex.Store并导出模块。


源码分析vuex如何维护多个组件的数据共享


        下面再来看下vuex的源码,来了解为什么这样引入vuex。在index.js中从store.js文件中引入了Store和install。


源码分析vuex如何维护多个组件的数据共享


        在store.js文件中我们看到导出了Store类和install函数,其中Store类就是vuex的store实例的类,install函数是用来安装vuex的函数。


源码分析vuex如何维护多个组件的数据共享


        在install函数中,判断了当前传入的vue实例_Vue是否是之前调用install时缓存的vue实例,如果是同一个实例,就返回警告。


源码分析vuex如何维护多个组件的数据共享


        对比vue源码中的use API,这是vue引入插件和组件的常用方式,在这个方法中会调用插件的install方法。


源码分析vuex如何维护多个组件的数据共享


        在vuex的install函数中调用了applyMixin函数,是在mixin.js中引入的。在导出的函数中如果是vue2,那么通过Vue.mixin全局混入了一个beforeCreate的钩子函数。在钩子函数中,通过vuexInit把初始化vue实例的options中的store挂载到了vue实例的$store上,这也就是为什么在实例中可以通过$store访问到store实例。


源码分析vuex如何维护多个组件的数据共享


源码分析vuex如何维护多个组件的数据共享


        在真正初始化子组件的时候,走_init方法,如果是组件需要走initInternalComponent来合并options。


源码分析vuex如何维护多个组件的数据共享


        在initInternalComponent方法中,直接通过构造函数的options构造了一个对象,赋值给了vm.$options,通过构造函数完成了父组件options的传递,当然也包括了options中的store。



        就这样回到_init函数后,子组件通过执行beforeCreate钩子,把store也挂载到了自己的$store上面。




2020年了,作为新年礼物最后给大家送上一个最近看到google对2019年搜索最多的事件集锦,结尾印象很深的一句话分享给大家:Use your heart, your courage and vision to fix, to heal, to empathise, to connect.Beacuse living life for something bigger than yourself is a hero’s journey.请用你的心灵、勇气与视野去修正,去治愈,去同情,去联结外界。因为,为了比自己更广阔的世界而生活,是成为一位英雄必经的心路。共勉。