极简版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. 线性dp,分层图思想

    题目大意:给你一串数字,一串运算符,求递推用完运算符时答案的最大值----->线性dp dp[i][j] i表示所用数字的个数   j表示所用字符的个数 分层图思想 所有字符必须用完 所以取最后 ...

  2. mac mysql重置root用户密码

    苹果机安装的MySQL后,设置初始密码 引子:.在苹果机上安装的MySQL之后,通过MySQLWorkBench登录本地数据连接,发现没有密码,而在安装MySQL的过程中,是没有设置过密码的其实,刚刚 ...

  3. pi币--π币--手机离线式挖矿软件--pi中文教程!

    Pi Network派型网络,国外热度很高手机移动式挖矿软件 一个新出的手机移动式挖矿软件,在国外热度很高,国内玩的人目前很少.项目团队成员均来自斯坦福大学,三个创始人斯坦福博士教授,现在处于挖矿第一 ...

  4. 性能测试 | 记一次生产数据库sql由451s优化为0.4s的过程

    概述 最近开发说某个接口跑的很慢,排查了下发现其中一条sql,数据量不大,但居然要跑451s,下面简单记录一下优化的过程. 问题sql SELECT l.location_gid ENUMVALUE, ...

  5. mybatis映射文件祥解(StudentMapper.xml)

    1)以下是StudentMapper.xml文件,提倡放在与实体同目录下,文件名任意 <?xml version="1.0" encoding="UTF-8&quo ...

  6. easyUI之progressbar进度条

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  7. Django博客系统

    零.创建项目及配置 一.编写 Model 层的代码 二.配置 admin 页面 三.根据需求定制 admin

  8. haproxy-负载均衡介绍

    参考:http://www.iyunv.com/thread-252539-1-1.html 负载均衡介绍 四层和七层负载均衡的区别 四层 所谓的四层就是ISO参考模型中的第四层.四层负载均衡也称为四 ...

  9. 使用AWS、Docker与Rancher提供弹性的生产级服务

    2017-07-26 开始想你的 RancherLabs AWS Summit 2017 Beijing已经圆满落幕啦!亚马逊公司首席技术官沃纳·威格尔博士莅临现场,分享 AWS 最新云解决方案,把握 ...

  10. hive数据类型1