浅读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 ...
随机推荐
- LeetCode 141. 环形链表(Linked List Cycle)
题目描述 给定一个链表,判断链表中是否有环. 进阶:你能否不使用额外空间解决此题? 解题思路 快慢指针,慢指针一次走一步,快指针一次走两步,若两者相遇则说明有环,快指针无路可走则说明无环. 代码 /* ...
- rocketmq备忘
rocketmq unrecognized VM option 'MetaspaceSize=128m' => jdk1.8 JAVA_HOME https://blog.csdn.net/c3 ...
- qt5之网络通信
QT5 TCP网络通讯 服务器与客户端建立连接listen() - connectToHost(); 触发newPendingConnect信号 实时数据通讯write(); read(); 触发 ...
- 在vue项目中使用element-ui的Upload上传组件
<el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadD ...
- 计算机组成原理 — GPU 图形处理器
目录 文章目录 目录 显卡 GPU GPU 与深度学习 GPU 与 CPU 体系结构的区别 GPU 显存与 CPU 主存的区别 GPU 与 CPU 之间的数据交互方式 GPU 的体系结构 GPU 的工 ...
- 语音文件 pcm 静默(静音)判断
转载:http://www.voidcn.com/relative/p-fwdkigvh-bro.html pcm 文件存储的是 原始的声音波型二进制流,没有文件头. (1)首先要确认 pcm文件的每 ...
- lumen5.4设置cookie
use Illuminate\Support\Facades\Cookie; use Symfony\Component\HttpFoundation\Cookie as SCookie; //自定义 ...
- 直方图均衡化与直方图规定化的MATLAB实现
目录 1.直方图均衡化 2.直方图规定化 @ 1.直方图均衡化 对图像进行非线性拉伸,重新分配图像像元值,使一定灰度范围内像元值的数量大致相等就是直方图的均衡化.原来直方图中间的峰顶部分对比度得到增强 ...
- Linux下中文乱码
Linux下中文乱码 修改mysql配置文件,centeros下 配置文件在 /etc/my.cnf vi /etc/my.cnf 在[mysqld]段下添加 character-set-server ...
- Spark Streaming的实时词频和累加词频统计
(注:运行环境是Ubuntu16, pycharm) 1. 按时段统计:获取scoket端口传输的数据(英文数据即可,方便分词),统计各个时间段内每个单词出现的次数(每个时间段都分别统计,需要使用的关 ...