浅读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 84. 柱状图中最大的矩形(Largest Rectangle in Histogram)
题目描述 给定 n 个非负整数,用来表示柱状图中各个柱子的高度.每个柱子彼此相邻,且宽度为 1 . 求在该柱状图中,能够勾勒出来的矩形的最大面积. 以上是柱状图的示例,其中每个柱子的宽度为 1,给定的 ...
- LC 973. K Closest Points to Origin
We have a list of points on the plane. Find the K closest points to the origin (0, 0). (Here, the d ...
- java基础内存基础详解
堆区: 1.存储的全部是对象,每个对象都包含一个与之对应的class的信息.(class的目的是得到操作指令) 2.jvm只有一个堆区(heap)被所有线程共享,堆中不存放基本类型和对象引用,只存放对 ...
- MATLAB学习(七)求解优化问题:线性规划 非线性规划 拟合与插值 多目标规划
Minf(x)=-5x1 -4x2 -6x3 x1 -x2 +x3 <=20 3x1 +2x2 +4x3 <=42 ...
- Spring-Kafka —— 实现批量消费和手动提交offset
spring-kafka的官方文档介绍,可以知道自1.1版本之后, @KafkaListener开始支持批量消费,只需要设置batchListener参数为true 把application.yml中 ...
- 视区相关单位vw, vh
vw:相对于视窗的宽度,视窗宽度是100vw vh:相对于视窗的高度,视窗高度是100vh 参考资料:[https://www.zhangxinxu.com/wordpress/2012/09/new ...
- Docker Swarm常用命令
#查看集群节点 docker node ls #创建nginx服务 #docker pull hub.test.com:5000/almi/nginx:0.1 #下载私有仓库镜像 docker ser ...
- vue中如何使用event对象
原文地址 一.event 对象 (一)事件的 event 对象 你说你是搞前端的,那么你肯定就知道事件,知道事件,你就肯定知道 event 对象吧?各种的库.框架多少都有针对 event 对象的处理. ...
- 【AMAD】django-activity-stream
动机 简介 个人评分 动机 为你的django站点生成活动流(类似facebook feed).用户可以在个人feed页面看到订阅的人的活动流. 简介 django-activity-stream1中 ...
- MariaDB基本知识点总结01--介绍+语句
一.概念 1.数据库介绍: 简单的说,数据库就是一个存放数据的仓库,这个仓库是按照一定的数据结构(数据结构是指数据的组织形式或数据之间的联系)来组织,存储的,我们可以通过数据库提供的多种方法来管理数据 ...