浅读vuex源码,了解vuex基本原理
极简版vuex代码
class KVuex {
constructor (options) {
this.state = options.state
this.mutations = options.mutations
this.actions = options.actions
// 借用vue本身的响应式的通知机制
// state 会将需要的依赖收集在 Dep 中
this._vm = new KVue({
data: {
$state: this.state
}
})
} commit (type, payload, _options) {
const entry = this.mutations[type]
entry.forEach(handler=>handler(payload))
} dispatch (type, payload) {
const entry = this.actions[type] return entry(payload)
}
}
构造函数constructor接受options参数,options参数传进来之后,作为成员属性保存下来。vuex是依赖vue的, 借用vue本身的响应式的通知机制,constructor里声明一个vue实例,把vuex里的state赋值给实例中的data, 从而实现响应式动态变化。
我们做提交改数据又是什么行为呢?commit有3个参数type payload _options,我们从mutations里取出type对应的函数,对它进行具体的操作(传入参数执行函数)
Dispatch与commit类似,接受2个参数type payload ,从actions里取出type对应的函数,对它进行具体的操作(传入参数执行函数)
浅读vuex源码,了解vuex基本原理的更多相关文章
- 浅读vue-router源码,了解vue-router基本原理
项目中使用vue-router的时候,会进行以下操作(可能具体不是这么写的,但是原理一样): 定义映射关系routes: 定义router实例的时候传入vue和参数{routes...}: 定义vue ...
- Vuex 源码学习(一)
(一)Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化. —— 来自 V ...
- vuex源码 安装依赖问题
今天下载vuex源码时 安装依赖出现以下问题 > chromedriver@2.32.3 install /Users/bao/Desktop/vue-store/vuex/node_modul ...
- VueX源码分析(5)
VueX源码分析(5) 最终也是最重要的store.js,该文件主要涉及的内容如下: Store类 genericSubscribe函数 resetStore函数 resetStoreVM函数 ins ...
- VueX源码分析(3)
VueX源码分析(3) 还剩余 /module /plugins store.js /plugins/devtool.js const devtoolHook = typeof window !== ...
- VueX源码分析(4)
VueX源码分析(4) /module store.js /module/module.js import { forEachValue } from '../util' // Base data s ...
- VueX源码分析(2)
VueX源码分析(2) 剩余内容 /module /plugins helpers.js store.js helpers要从底部开始分析比较好.也即先从辅助函数开始再分析那4个map函数mapSta ...
- VueX源码分析(1)
VueX源码分析(1) 文件架构如下 /module /plugins helpers.js index.esm.js index.js store.js util.js util.js 先从最简单的 ...
- vuex 源码分析(六) 辅助函数 详解
对于state.getter.mutation.action来说,如果每次使用的时候都用this.$store.state.this.$store.getter等引用,会比较麻烦,代码也重复和冗余,我 ...
- 一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构
1.前言 本文内容讲解的内容:一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构. 项目地址:https://github.com/biaochenxuying/vu ...
随机推荐
- arcgis python desc.dataType
desc = arcpy.Describe(r"C:\Users\dell\Documents\ArcGIS\ddd.shp") 是ShapeFile desc = arcpy.D ...
- Flutter移动电商实战 --(13)ADBanner组件的编写
1.AdBanner组件的编写 我们还是把这部分单独出来,需要说明的是,这个Class你也是可以完全独立成一个dart文件的.代码如下: 广告图片 class AdBanner extends Sta ...
- Linux 下安装 Tomcat 服务器和部署 Web 应用
一.上传Tomcat服务器 二.安装Tomcat服务器 2.1.解压tomcat服务器压缩包 2.2.配置环境变量 tomcat服务器运行时是需要JDK支持的,所以必须配置好JDK用到的那些环境变量 ...
- P2341 [HAOI2006]受欢迎的牛(更完)
P2341 [HAOI2006]受欢迎的牛 题解 tarjan 缩点板子题 如果 A 稀饭 B,那就 A 向 B 连边,构造出一个有向图 如果这个有向图里有强连通分量,也就说明这个强连通分量里的所有奶 ...
- Graphics 使用一点点注意
Form_Load 事件下绘制的结果会被 paint 刷新掉.也就等于没有绘制一样. Graphics g = this.CreateGraphics(); g.DrawRectangle(new P ...
- 在Ubuntu 16.04 LTS下编译安装OpenCV 4.1.1
目录 一 安装前的准备 二 编译并安装OpenCV 4.1.1 注:原创不易,转载请务必注明原作者和出处,感谢支持! OpenCV目前(2019-8-1)的最新版本为4.1.1.本文将介绍如何在Ubu ...
- 手把手教你用蒲公英获取udid
如果需要获取udid,但是拥有手机的测试用户身边没有mac电脑和xcode环境, 今天就分享一个快捷的在线获得udid的方法 利用蒲公英网站的获取udid功能 手机浏览器访问 http://www.p ...
- Qt编写自定义控件14-环形进度条
前言 环形进度条,用来展示当前进度,为了满足大屏UI的需要特意定制,以前有个叫圆环进度条,不能满足项目需要,只能重新定做,以前的进度间距不能自适应分辨率,而且当前进度对应的反的进度不能单独设置颜色,即 ...
- 自动化运维:(2)Shell 编程的流程控制
一. if语句 1.单分支if语句——单一条件,只有一个输出 #!/bin/bash # 单if语句的使用场景 if [ "$1" == "nan" ] the ...
- android#编写一个聊天界面
摘自<第一行代码>——郭霖 既然是要编写一个聊天界面,那就肯定要有收到的消息和发出的消息.上一节中我们制作的message_left.9.png可以作为收到消息的背景图,那么毫无疑问你还需 ...