对 Vuex 源码进行浓缩,DIY 一个小型 Vuex

功能如下

  1. 通过 $store.commit 改变 $store.state
  2. 实现 strict model

源码约70行左右比较好理解,下面讲解一下两个比较重要的点。

install

Vue.use(Vuex)实际上调用的是 Vuex 的 install 方法,该方法在每个组件的 beforeCreate 钩子中为当前组件注入 $store,使所有组件的 $store 属性都指向同一个对象,也就是创建 Vue 实例时传入的 store 对象。

监听 store

为什么当 state 对象发生变化时视图会被更新?原因是 store 内部创建了一个 Vue 对象对 state 进行监听(见源码 resetStoreVM 方法)。而且上面也提到,使用 Vuex 后,所有组件的 $store 都引用的都是同一个 store。所以当 state 变化时,绑定了 state 的视图都会更新。

原文地址:https://segmentfault.com/a/1190000017049048

来实现一个缩水版Vuex的更多相关文章

  1. .NET Core的文件系统[5]:扩展文件系统构建一个简易版“云盘”

    FileProvider构建了一个抽象文件系统,作为它的两个具体实现,PhysicalFileProvider和EmbeddedFileProvider则分别为我们构建了一个物理文件系统和程序集内嵌文 ...

  2. ASP.NET Core管道深度剖析(2):创建一个“迷你版”的管道来模拟真实管道请求处理流程

    从<ASP.NET Core管道深度剖析(1):采用管道处理HTTP请求>我们知道ASP.NET Core请求处理管道由一个服务器和一组有序的中间件组成,所以从总体设计来讲是非常简单的,但 ...

  3. TaskScheduler一个.NET版任务调度器

    TaskScheduler是一个.net版的任务调度器.概念少,简单易用. 支持SimpleTrigger触发器,指定固定时间间隔和执行次数: 支持CronTrigger触发器,用强大的Cron表达式 ...

  4. 一个jQ版大图滚动

    难得周末能休息,也是越发的代码难受,手就想敲点东西,这不闲着无聊敲了一个Jq版的大图滚动,不足之处大家批评指正: 运作环境win7,代码编辑器是:sublime; 我把源码复制了一下, <!do ...

  5. 写一个迷你版Smarty模板引擎,对认识模板引擎原理非常好(附代码)

    前些时间在看创智博客韩顺平的Smarty模板引擎教程,再结合自己跟李炎恢第二季开发中CMS系统写的tpl模板引擎.今天就写一个迷你版的Smarty引擎,虽然说我并没有深入分析过Smarty的源码,但是 ...

  6. 心愿:做一个精简版MFC

    我觉得自己有能力看懂MFC的C++代码和总体流程,但是由于MFC混杂了太多的东西,比如OLE等等不必要的东西,又做了无数的ASSERT判断,影响整体流程的理解.因此我要做一个精简版的MFC,而且能用它 ...

  7. 依赖注入[5]: 创建一个简易版的DI框架[下篇]

    为了让读者朋友们能够对.NET Core DI框架的实现原理具有一个深刻而认识,我们采用与之类似的设计构架了一个名为Cat的DI框架.在<依赖注入[4]: 创建一个简易版的DI框架[上篇]> ...

  8. 依赖注入[4]: 创建一个简易版的DI框架[上篇]

    本系列文章旨在剖析.NET Core的依赖注入框架的实现原理,到目前为止我们通过三篇文章(<控制反转>.<基于IoC的设计模式>和< 依赖注入模式>)从纯理论的角度 ...

  9. .NET CORE学习笔记系列(2)——依赖注入[4]: 创建一个简易版的DI框架[上篇]

    原文https://www.cnblogs.com/artech/p/net-core-di-04.html 本系列文章旨在剖析.NET Core的依赖注入框架的实现原理,到目前为止我们通过三篇文章从 ...

随机推荐

  1. 编译安装Python3.6.1

    系统:CentOS 7 Python: 3.6.1 去官方网站下载Python的源码包 然后准备开发环境和服务器平台开发 注意:python编译还依赖一个zlib-devel(本人第一次编译就因为不知 ...

  2. 图像分割中的loss--处理数据极度不均衡的状况

    序言: 对于小目标图像分割任务,一副图画中往往只有一两个目标,这样会加大网络训练难度,一般有三种方法解决: 1.选择合适的loss,对网络进行合理优化,关注较小的目标. 2.改变网络结构,使用atte ...

  3. QEventLoop配合QTimer实现阻塞任务超时处理

    A阻塞主线程正常运行,需要做特殊处理. 以下代码可实现,A阻塞或者正常处理时,均不阻塞主线程正常处理. QEventLoop eventloop; // use point to manage eve ...

  4. Nginx 的常用命令

    nginx命令,先来一波基本操作: start nginx // 启动Nginx nginx -t // 测试配置文件 nginx -v // 查看Nginx版本 nginx -V // 查看Ngin ...

  5. CSS3 进阶

    background-clip指定了背景可以覆盖到什么范围.background-origin指定了背景从什么位置开始.在例子中设置背景平铺应该可以看得清楚些. CSS3之前的背景,按规定是不会进入到 ...

  6. php循环语句(二)

    for 循环 for 循环用于您预先知道脚本需要运行的次数的情况. 语法 for (初始值; 条件; 增量) { 要执行的代码; } 参数: 初始值:主要是初始化一个变量值,用于设置一个计数器(但可以 ...

  7. 深入浅出 Java Concurrency (10): 锁机制 part 5 闭锁 (CountDownLatch)[转]

    此小节介绍几个与锁有关的有用工具. 闭锁(Latch) 闭锁(Latch):一种同步方法,可以延迟线程的进度直到线程到达某个终点状态.通俗的讲就是,一个闭锁相当于一扇大门,在大门打开之前所有线程都被阻 ...

  8. PAT甲级——A1015 Reversible Primes

    A reversible prime in any number system is a prime whose "reverse" in that number system i ...

  9. CentOS 6.5 Apache+SVN使用户可以自己修改密码

    yum -y install php #安装php mkdir /var/www/svnadmin #建立页面目录 vi /var/www/svnadmin/index.php #创建index.ph ...

  10. Python+Django+Ansible Playbook自动化运维项目实战

    Python+Django+AnsiblePlaybook自动化运维项目实战 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单 ...