vuex源码分析

本文适合有一定基础的同学阅读，主要探究vuex的源码结构，有那几部分组成，每部分承担的职责，每部分之间的关系。以及部分代码细节，和编程技巧。

本文主要针对代码结构和设计，画图做抽象思考。代码细节请查看文末参考资料，非常详尽和仔细。

vuex应用概览图

vuex源码类图

主要描述Store, ModuleCollection, Module三个类，以及它们之间的关系

比较核心的是Store类，核心的安装模块方法（用到ModuleCollection类），初始化store._vm方法，都在其中

store对象

store对象的结构与源码中store类的构造函数中是一一对应的，如果有不在构造函数中的，则是分散在部分实例方法中做赋值的，例如 store._vm属性。有兴趣的可以一一比较分析，

1.store._modules是ModuleCollection实例，ModuleCollection用到Module类，本质是构造一个Module树
2.分module的state，本质上被构造为state树，作为store._vm._data.$$state
3.store._modulesNamespaceMap是namespace -> module映射，用于按namespace快速查找对应module

什么最重要，数据结构最重要，只有你定义出合理的数据结构，才能满足你的功能需求，它是基石也是核心。

store对象

store中的vm实例对象

vuex辅助函数

相关资料

https://zhuanlan.zhihu.com/p/...

https://github.com/dwqs/blog/...

https://github.com/answershut...

https://segmentfault.com/a/11... 这个主要是讲代码细节，也不错

https://zhuanlan.zhihu.com/p/... 这个强烈推荐，既讲代码结构和功能设计，又讲代码细节。