资讯专栏INFORMATION COLUMN

来实现一个缩水版Vuex

XboxYan / 703人阅读

摘要:对源码进行浓缩,一个小型功能如下通过改变实现源码约行左右比较好理解,下面讲解一下两个比较重要的点。监听为什么当对象发生变化时视图会被更新原因是内部创建了一个对象对进行监听见源码方法。

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

功能如下

通过 $store.commit 改变 $store.state

实现 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://www.ucloud.cn/yun/108653.html

相关文章

  • Vue全家桶实现还原豆瓣电影wap

    摘要:豆瓣电影版用全家桶仿写豆瓣电影版。原计划仿写完所有页面,碍于豆瓣的接口有限,实现页面也有限。由于公开的豆瓣接口具有访问次数限制,克隆到本地体验效果更加端访问已设置宽度适配。 douban-movie(豆瓣电影wap版) 用vue全家桶仿写豆瓣电影wap版。 最近在公司项目中尝试使用vue,但奈何自己初学水平有限,上了vue没有上vuex,开发过程特别难受。 于是玩一玩本项目,算是对相关...

    Near_Li 评论0 收藏0
  • 搬瓦工:香港 PCCW 机房已免费迁移升级至香港 CN2 GIA 机房

    摘要:因为之前就有通知说香港机房即将关闭,还是在月下旬的时候,没想到过了一个月就开始迁移。搬瓦工香港机房比香港机房线路质量好很多,非常好用,所以我们迁移到香港机房对于我们来说也是非常好用的。搬瓦工怎么样,搬瓦工好不好,今天收到邮件,站长的一台搬瓦工香港 VPS 已经被迁移到香港 CN2 GIA 机房了,本来是在香港 PCCW 机房的。因为之前就有通知说香港 PCCW 机房即将关闭,还是在 6 月下...

    whataa 评论0 收藏0
  • vue数据传递--我有特殊的实现技巧

    摘要:同时有一种特殊的实现方案。组件之间传值有这么几种数据传递方式,和特殊的。在所有实例中使用其进行数据的通信。双多方使用同名事件进行沟通。数据非长效数据,无法保存,只在后生效。这样约定的好处是,我们能够记录所有中发生的改变。 前言 最近碰到了比较多的关于vue的eventBus的问题,之前定技术选型的时候也被问到了,vuex和eventBus的使用范围。所以简单的写一下。同时有一种特殊的实...

    xiaoxiaozi 评论0 收藏0
  • 前端单元测试初探

    摘要:本文只讨论单测的范畴,对集成测试有兴趣的话,可以看下的集成测试代码。前端单测现状测试本质上就是假定一个输入,然后判断得到预期的输出。 原文发于我的博客:https://github.com/hwen/blogS... 要不要写单测? 关于这个 cnode 上就有个很有意思的讨论 做个调查,你的 Node 应用有写单测吗? 看完这个应该会有结论?如果没有,就回帖跟别人探讨下~ 测试 测试...

    isLishude 评论0 收藏0
  • vue vuex vue-rouert后台项目——权限路由(超详细简单

    摘要:可以配合相关的官方文档学习。上面的内容说的重点,其实也算是项目的全部啦项目地址感觉还不错的话就请给个吧谢谢有什么问题欢迎提问 项目地址:vue-simple-template共三个角色:adan barbara carrie 密码全是:123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 blue 页面(共三个页面)barbara 拥有 权限B 他可以看到...

    olle 评论0 收藏0

发表评论

0条评论

XboxYan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<