极简版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基本原理的更多相关文章

  1. 浅读vue-router源码,了解vue-router基本原理

    项目中使用vue-router的时候,会进行以下操作(可能具体不是这么写的,但是原理一样): 定义映射关系routes: 定义router实例的时候传入vue和参数{routes...}: 定义vue ...

  2. Vuex 源码学习(一)

    (一)Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化. —— 来自 V ...

  3. vuex源码 安装依赖问题

    今天下载vuex源码时 安装依赖出现以下问题 > chromedriver@2.32.3 install /Users/bao/Desktop/vue-store/vuex/node_modul ...

  4. VueX源码分析(5)

    VueX源码分析(5) 最终也是最重要的store.js,该文件主要涉及的内容如下: Store类 genericSubscribe函数 resetStore函数 resetStoreVM函数 ins ...

  5. VueX源码分析(3)

    VueX源码分析(3) 还剩余 /module /plugins store.js /plugins/devtool.js const devtoolHook = typeof window !== ...

  6. VueX源码分析(4)

    VueX源码分析(4) /module store.js /module/module.js import { forEachValue } from '../util' // Base data s ...

  7. VueX源码分析(2)

    VueX源码分析(2) 剩余内容 /module /plugins helpers.js store.js helpers要从底部开始分析比较好.也即先从辅助函数开始再分析那4个map函数mapSta ...

  8. VueX源码分析(1)

    VueX源码分析(1) 文件架构如下 /module /plugins helpers.js index.esm.js index.js store.js util.js util.js 先从最简单的 ...

  9. vuex 源码分析(六) 辅助函数 详解

    对于state.getter.mutation.action来说,如果每次使用的时候都用this.$store.state.this.$store.getter等引用,会比较麻烦,代码也重复和冗余,我 ...

  10. 一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

    1.前言 本文内容讲解的内容:一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构. 项目地址:https://github.com/biaochenxuying/vu ...

随机推荐

  1. ECharts3D地图(详细示例——附有具体注释)

    3D地图图表效果如下: 具体代码如下: <!DOCTYPE html><html><head> <meta charset="UTF-8" ...

  2. vs2017+opencv配置参考链接

    本人通过以下几篇博客完成vs2017+opencv3.4.1的配置: OpenCV 3.4.1 + VS2017 开发环境搭建 - 简书 WIN10下 VS2017+OpenCv 3.4.1 配置 - ...

  3. Docker-----关于dockerfile

    docker build参数说明 --no-cache :创建镜像的过程不使用缓存: --force-rm :设置镜像过程中删除中间容器: --network=host:容器会使用宿主机的网络,容器与 ...

  4. TP5连接数据库和phpstrom连接数据库(宝塔面板数据库连接)

    1.编译器:phpstrom 框架:TP5 服务器面板:宝塔面板 2.我遇到的核心问题:数据库.用户名.密码均正确但是无法连接, 使用宝塔面板的都知道phpmyadmin的端口号是888,注意注意这个 ...

  5. 加载大图片的OOM异常

    * 原因:系统分配给应用程序的堆内存 < 图片的大小* 解决方案:缩放图片显示* OOM:OutOfMemoryError * 图片的宽高 * 宽 2400 * 高 3200 * 手机屏幕的宽高 ...

  6. <application>节点属性

    1.android:allowBackup 它表示是否允许应用程序参与备份.如果将该属性设置为false,则即使备份整个系统,也不会执行这个应用程序的备份操作,而整个系统备份能导致所有应用程序数据通过 ...

  7. Pattern Evaluation

    对相关性patten质量的常用分析指标有以下这些 其中,X^2 跟 lift不是null-invariant的,也就是说当~A~B项较多时,这两个指标不是很可靠. 据Jiawei Han所言,Kulc ...

  8. Flink初探wordCout

    知识点 Flink介绍 1.无界数据-->数据不断产生 2.有界数据-->最终不再改变的数据 3.有界数据集是无界数据集的一个特例 4.有界数据集在flink内部是以一种终态数据集进行处理 ...

  9. CORS,jsonp解决跨域问题

    同源和跨域 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上 ...

  10. 3. Linux文件系统

    什么是文件系统 A directory structure contained within a disk drive or disk area(文件系统是包括在一个磁盘或分区的目录结构) A met ...