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构造函数的基本脉络,以下的章节就要一点一点的去剖析每一步了,进度变缓、难度加大。大家坐稳扶好。
vuex commit 模块_长篇连载:Vuex源码学习(二)脉络梳理相关推荐
- vuex commit 模块_分享一个Vuex的使用的新姿势
本文适合对Vuex有过中度使用--至少在一个项目使用vuex以及相关辅助函数的朋友阅读. 关于Vuex(太长,可以不看) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存 ...
- python 传奇服务端_传奇游戏服务器源码学习
依据传奇游戏服务器源码总结了一下服务器开发中比较关心的一些问题. (1)线程之间的共享数据如何同步 CIntLock封装了临界区管理,包含了Lock()和Unlock()两个操作函数,所有 需要同步的 ...
- SocketServer源码学习(二)
SocketServer 中非常重要的两个基类就是:BaseServer 和 BaseRequestHandler 在SocketServer 中也提供了对TCP以及UDP的高级封装,这次我们主要通过 ...
- yara 源码学习(二) 规则编译部分
yara规则的详细信息请参考: https://yara.readthedocs.io/en/stable/writingrules.html 根据官方文档,yara规则长这个样子: [1]:yara ...
- Mybatis源码学习二(一级缓存)
一级缓存流程 一级缓存有效的因素 一级缓存有效测试 public class User {private Integer id;private String name;public Integer g ...
- Golang源码学习(二)----Go源码学习基础
### 本文源码版本为 GO 1.17.8 Windows/amd64: ### 可能参与对比的版本:GO 1.16.2 Linux/amd64一.Golang的编译器究竟是如何工作的? (学习源码有 ...
- java集合类程序代码_java集合类源码学习二
我们查看Collection接口的hierarchy时候,可以看到AbstractCollection这样一个抽象类,它实现了Collection接口的部分方法,Collection集合系列的各个集合 ...
- Thrift源码学习二——Server层
Thrift 提供了如图五种模式:TSimpleServer.TNonblockingServer.THsHaServer.TThreadPoolServer.TThreadSelectorServe ...
- 使用base标签后图片无法加载_Spring 源码学习(二)-默认标签解析
`Spring` 解析默认标签~ 从上一篇笔记可以看出,在容器注册 bean 信息的时候,做了很多解析操作,而 xml 文件中包含了很多标签.属性,例如 bean . import 标签, meta ...
最新文章
- matlab vco,MATLAB锁相环仿真程序求解
- SAP SHD0的详细简介
- win7 asp虚拟服务器,win7怎么利用ASP获取服务器IP地址 win7利用ASP获取服务器IP地址教程...
- LeetCode MySQL 1511. Customer Order Frequency
- 添加自定义监控项目,配置邮件告警,测试告警,不发邮件的问题处理
- MapReduce论文
- CentOS 6.5下源码包安装配置JDK 7
- 前端基础:JavaScript 代码风格指南
- JHipster中文官网
- 在python中print表示的数据类型是_在python中自己写的数据类型使用print无法输出每个元素...
- 快压和360压缩哪个好?快压和360压缩对比介绍
- 08python 主函数调用子函数
- android连iphone热点超时,苹果手机开热点安卓手机连不了为什么
- c语言spoc测验成绩比重,SPOC混合教学模式在C语言程序设计课程的应用
- 使用APKTOOL 反编译APK 失败的解决方法
- layui 自定义表格行高,自适应
- Docker离线安装及python算法部署详细介绍
- 通过简单的类和接口实现手机套餐办理服务
- Beyond Compare 4 远程对比
- Sublime Text 3中文包安装