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

chenjiang3 发布于2019-08-23 16:18 / 2220人阅读

摘要：各位看官没看过功能梳理的可以先阅读下源码学习一功能梳理前车之鉴有了源码学习的经验，每次看认真钻研源代码的时候都会抽出一小段时间来大体浏览一遍源代码。大体了解这个源代码的脉络，每个阶段做了什么，文件目录的划分。

各位看官没看过功能梳理的可以先阅读下
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的时候做了哪些事情

GPU云服务器云服务器深度学习二脉络梳理 Vuex

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102878.html

Vuex源码学习（一）功能梳理

摘要：我们通常称之为状态管理模式，用于解决组件间通信的以及多组件共享状态等问题。创建指定命名空间的辅助函数，总结的功能首先分为两大类自己的实例使用为组件中使用便利而提供的辅助函数自己内部对数据状态有两种功能修改数据状态异步同步。 what is Vuex ? 这句话我想每个搜索过Vuex官网文档的人都看到过，在学习源码前，当然要有一些前提条件了。了解Vuex的作用，以及他的使用场景。 ...

livem 2019-08-23 16:11 评论0 收藏0
Zepto.js源码学习之二

摘要：本次主要分享关于上一篇区域的学习。区域为的核心部分，它的结构如下为了便于梳理思路，以上代码省略了细节，只保留了轮廓脉络。最终暴露给开发者的如下图所示这里只分析了区域的结构，下一次会深入到函数语句粒度。本次主要分享关于上一篇区域2的学习。区域2为Zepto的核心部分，它的结构如下 var Zepto = (function() { var $, zepto = {}; fu...

kel 2019-08-20 13:31 评论0 收藏0
[源码学习] Vuex

摘要：为了更清楚的理解它的原理和实现，还是从源码开始读起吧。结构梳理先抛开，的主要源码一共有三个文件，，初始化相关用到了和我们使用创建的实例并传递给的根组件。这个方法的第一个参数是构造器。的中，在保证单次调用的情况下，调用对构造器进入了注入。原文链接 Vuex 作为 Vue 官方的状态管理架构，借鉴了 Flux 的设计思想，在大型应用中可以理清应用状态管理的逻辑。为了更清楚的理解它的原理和...

FreeZinG 2019-08-19 18:18 评论0 收藏0