vuex原理笔记

本文总结自: https://tech.meituan.com/vuex-code-analysis.html, 将要点提炼为笔记，以便不时之需，安不忘危。

核心可分为两部分: 

1.vue.use(Vuex)

本质上执行Vuex的install方法，参数为Vue

Vue赋给局部对象

调用applyMixin()

Vue生命周期里添加vuexInit

层层嵌套添加$store

 

2.创建store实例

前提是必须调用过Vue.use(Vuex)，必须支持Promise

初始化基本属性（比如committing，用来监测是否非法修改state；比如_modulesNamespaceMap，用来存储命名空间）

初始化moduleCollection，参数为option对象，来创建module对象树

原型dispatch方法、commit方法封装，使其第一个参数为state

其中commit内通过_withCommit来修改状态，这是唯一的合法方法

严格模式设置

installModule()，模块安装，初始化组件树的根模块

其中installModule()主要完成:

如果有命名空间，将模块添加进store._modulesNamespaceMap这个数组里

如果不是根组件且非hot，将其state设置到父级state的moduleName属性上

makeLocalContext()上下文环境设置,根据命名空间为模块设置局部dispatch、commit、getter和state

注册对应模块的mutation、action、getter

递归地为子module调用installModule

resetVM，store的初始化

植入devtoolPlugin并提供"时空穿梭功能"

 

state内部如何支持模块配置与模块嵌套的？

store对象构造过程中会调用makeLocalContext（创建本地上下文），每一个module都有一个上下文环境，与配置时的路径匹配，因此dispatch('a', b)等时，默认拿到的是local state，如果需要服务外层或其他module的state，只能根据rootState沿路径逐步访问。