浅读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 ...
随机推荐
- 炉石兄弟 修复图腾师问题 by大神beebee102, 还有阴燃电鳗
修复图腾师问题 beebee102 修复了先摇图腾再下图腾师的问题,另外加了阴燃电鳗的sim卡.在兄弟策略的模拟程序中测试了没问题,真机没有试过,麻烦吧友测试了回复一下.链接: [有效] http ...
- git 撤消修改
第一步: 执行git reflog获取你自己的commit id(这里就是A1).当然你可以在eclipse的git插件中通过查看历史得到 第二步: 执行git reset –hard A1(这里的A ...
- 【MyBatis】【SQL】没有最快,只有更快,从一千万条记录中删除八百万条仅用1分9秒
这次直接使用delete from emp where cdate<'2018-02-02',看看究竟会发生什么. Mapper里写好SQL: <?xml version="1. ...
- HTTP中GET请求与POST请求的区别
GET和POST是HTTP请求的两种基本方法.最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数.但这只是表象,或者说只是现象,并不是核心.本文将细细谈谈对它们的 ...
- Android 关于 CountDownTimer onTick() 倒计时不准确问题源码分析
一.问题 CountDownTimer 使用比较简单,设置 5 秒的倒计时,间隔为 1 秒. final String TAG = "CountDownTimer"; * , ) ...
- tensorflow中一个矩阵和一个向量相加
import tensorflow as tf x=tf.constant([[1,2],[3,4]]) y=tf.constant([[1],[1]])#列向量 z=tf.constant([1,1 ...
- monkey 查找闪退页面的方法
使用了命令 adb shell monkey --pct-touch 100 -v -p com.iBer.iBerAppV2 5000 >/Users/kaibinliu/Desktop ...
- 安装flanal报错解决
1.:Error registering network: failed to acquire lease: node "test4" pod cidr not assigned ...
- Spring Cloud(4):断路器(Hystrix)
Hystrix介绍 相对于单一系统,分布式系统更容易遇到故障,所以我们一般通过构建冗余,使用集群和负载均衡来保证系统的弹性和高可用.当然,这种方式只解决了一部分问题,当服务崩溃时,我们很容易检测到,因 ...
- C++ min函数
min 是c++标准库头文件中的一个重要的函数.它的功能是一个最小值的函数,比较两个数值的大小,返回他们的之间最小值. #include <algorithm> int a=2; int ...