vuex源码解读--流程解析

$\bullet$ 前言

年初的时候看了一半，但是当时换完工作就没再继续了。最近总算腾出空了，就从头完整的梳理一遍

$\bullet$ 几个疑问

$\ast$ 1-为什么在根目录挂载过后，在每个组件实例就都能拿到store中的数据了？

$\ast$ 2-为什么修改store中的数据能够触发vue组件的更新？

$\ast$ 3-它是怎么做模块拆分的？

$\bullet$ 为什么在根目录挂载过后，在每个组件实例就都能拿到store中的数据了

vuex作为vue插件，需要通过vue.use进行注册，在注册过程中vue会把自身注入到向插件并调用插件的install进行安装

而这实际上是调用Vue.mixin混入了声明周期钩子beforeCreate，由于组件在初始化init过程中会有一次配置合并从vue构造函数上读取使用mixin保存的静态属性option，所以每个组件都会执行到vuexInit函数，自然也就能拿到store中的数据了

（组件初始化时是向上读取缓存并添加到自身：this.$store = options.parent.$store）

$\bullet$ 为什么修改store中的数据能够触发vue组件的更新

注册完后，一般我们都是通过new Vuex.Store将vuex中的数据或公共API进行挂载，它会执行到resetStoreVM函数

既然是new Vue那就一定会执行组件的初始化逻辑，所以呢，也必然会执行initState方法进行响应式处理。所以基本可以断定，它是借助响应式实现的组件更新。那么现在只需要看commit的过程中是怎么完成依赖收集和派发更新的即可

可以看到这里拿到我们在store中的mutations下定义的函数并执行

当然，这是被包装处理过的函数，其实际上走的是这个

可以看到，这里对每一个key都进行了一次遍历，state[key]即是触发依赖收集的关键

接着调用具体的函数，如下，state.age = payload 即派发更新

$\bullet$ vuex是如何做模块拆分的

示例代码如下

将代码定位到new ModuleCollection(options)，进入，可以看到对modules遍历并对register进行递归，依次传入moduleA和moduleB的内容，并通过children建立父子关系

则，处理后的module形如：

{

root:{

children:{

a:moduleA,

b: moduleB

}

}

}

接着递归state通过Vue.set将子module中的state处理成响应式数据