vuex commit 模块_长篇连载：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 = thisconst { dispatch, commit } = thisthis.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._wrappedGettersinstallModule(this, state, [], this._modules.root)

在模块链接完毕之后可以拿到一个state，这个就是经过模块链接之后的根结点的state。

然后用根结点state和根结点模块，来初始化根结点以及递归的注册所有模块。

重置VM对象

//重置storeVMresetStoreVM(this, state)

重置一下store的vm对象，这块也是一个核心的点，会在以后章节讲述vm对象的用处以及resetStoreVM函数的作用。

注册插件

最后Vuex支持各种插件

注册一下插件。

上个图吧：

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