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

各位看官 没看过功能梳理的能够先阅读下 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支持各类插件

注册一下插件。

上个图吧：

这就是Vuex最核心的Store构造函数的基本脉络，如下的章节就要一点一点的去剖析每一步了，进度变缓、难度加大。你们坐稳扶好。

下一章讲述install的时候作了哪些事情