Vuex源码学习（二）脉络梳理

35次阅读

共计 1600 个字符，预计需要花费 4 分钟才能阅读完成。

各位看官没看过功能梳理的可以先阅读下 Vuex 源码学习（一）功能梳理.
前车之鉴
有了 vue-router 源码学习的经验，每次看认真钻研源代码的时候都会抽出一小段时间来大体浏览一遍源代码。大体了解这个源代码的脉络，每个阶段做了什么，文件目录的划分。下面我来带大家梳理一下 Vuex 的脉络。
Vuex 与 vue-router 结构的区别
Vuex 的结构与 vue-router 结构的核心区别就在与 Vuex 有一大批的辅助函数需要提供、这个并不在应该 Vuex 这个类中，
所以 Vuex 的 index.js 只是一个出口文件，负责输出 Store、install、以及所有的辅助函数。而 vue-router 的 index.js 就是 router 的构造函数。
我们看一下 Vuex 的 index.js
只是一个简单的输出，回忆下我们如何使用初始化 Vuex
Vue.use(Vuex)

export default new Vuex.Store(
{
state : …,
modules : …
}
)

main.js
// 引入 vuex 实例
import store from ‘./store’
new Vue(
{
store
}
)
这可以看出来 Vuex 的核心类（Store）就在 store.js 这个文件中，
接下来看一下 store.js 中这个核心的类 Store，
这一期只是单纯的梳理脉络，所以只是看一下 Store 的 constrctor 函数

new Store 的过程首先要声明一些空间用于存储 mutation、action、getters 等，然后关键代码
生成模块与模块链接
完成模块之间的链接。我们要把 Vuex 组织成一个树形结构，如果需要的话（有 module）
this._modules = new ModuleCollection(options);
_modules 会放置被组织好的模块们，如何组织的我们会在模块与模块链接的章节详细解释，这只需要知道，Vuex 初始化的时候很早的就把模块组织链接好了。
bind dispatch 与 commit 方法
然后对 dispacth 和 commit 方法进行了设置
把这两个函数的 this 执行绑定在 store 实例上，
const store = this
const {dispatch, commit} = this
this.dispatch = function boundDispatch (type, payload) {
return dispatch.call(store, type, payload)
}
this.commit = function boundCommit (type, payload, options) {
return commit.call(store, type, payload, options)
}
installModule 根据根模块的 state 与根模块实例来递归注册所有的模块
// init root module.
// this also recursively registers all sub-modules
// and collects all module getters inside this._wrappedGetters
installModule(this, state, [], this._modules.root)
在模块链接完毕之后可以拿到一个 state，这个就是经过模块链接之后的根结点的 state。然后用根结点 state 和根结点模块，来初始化根结点以及递归的注册所有模块。
重置 VM 对象
// 重置 storeVM
resetStoreVM(this, state)
重置一下 store 的 vm 对象，这块也是一个核心的点，会在以后章节讲述 vm 对象的用处以及 resetStoreVM 函数的作用。
注册插件
最后 Vuex 支持各种插件
注册一下插件。
上个图吧：