本文总结自: 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沿路径逐步访问。