浅读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 ...
随机推荐
- FreeMarker学习(内建函数参考)
内容参考:http://freemarker.foofun.cn/dgui_quickstart_basics.html 一.字符串内建函数 boolean: 字符串转为布尔值.字符串必须是 true ...
- 在HearthRanger中使用Silverfish
I'm new here and have never used this bot before. But a few days ago I tried it and I liked it :) I ...
- EclipseADT编写单元测试代码的步骤
1. 写一个类 extends AndroidTestCase 2. 写一个测试方法 a.必须是public b.必须抛出异常给操作系统 public void textAdd()thr ...
- RabbitMQ学习之:(六)Direct Exchange (转贴+我的评论)
From: http://lostechies.com/derekgreer/2012/04/02/rabbitmq-for-windows-direct-exchanges/ RabbitMQ fo ...
- RabbitMQ 使用参考
http://www.zouyesheng.com/rabbitmq.html 安装 基本概念 基本形式 持久化 调度策略 5.1. fanout 5.2. direct 5.3. topic 5.4 ...
- Java端使用Batik将SVG转为PNG
在上篇中,我们需要将Highcharts生成的图通过后台保存到pdf文件中,就需要对SVG进行转换. 这里就介绍一下使用Batik处理SVG代码的方法. 首先是jar包的获取地址,https://xm ...
- WampServer 下载以及安装问题 以及配置远程连接MYSQL
WampServer 3.0 下载: http://dl.pconline.com.cn/download/52877-1.html 碰到的问题DDL无法添加,解决方法:MSVCR110.DLL fo ...
- k8s集群部署(3)
一.利用ansible部署kubernetes集群环境准备 基于二进制方式部署和利用ansible-playbook实现自动化:既提供一键安装脚本,也可以分步执行安装各个组件,同时讲解每一步主要参数配 ...
- Linux命令行如何返回上一次的目录
千辛万苦进入了一个很深层的目录,一不小心输入了cd并回车 ......... 并不是再进一次,对于bash来说,只需要很管理的一个命令: cd - 该命令等同于cd $OLDPWD,关于这一点在bas ...
- Java数组(2):数组与泛型
通常,数组与泛型不能很好的结合,你不能实例化具有参数化类型的数组.擦除会移除参数类型信息,而数组必须知道它们所持有的确切类型.但是我们可以参数化数组本身. import java.util.Array ...