经过上一篇章介绍,完成了添加全局 $store,接下来就是实现共享数据的功能。

在 Vuex 中,共享数据是通过 state 来实现的,所以我们需要在 Nuex.js 文件中实现 state 的功能。

在 Vuex 中,state 是一个对象,这个对象中存放的就是我们的共享数据,所以我们需要在 Nuex.js 文件中定义一个 state 对象。

在 store 目录中,我们给 Vue 注册 Nuex 时创建了 store 对象,并且定义了共享属性,在根组件中,使用了 store,那么我们在 install 方法中就可以通过 Vue 实例访问到 store 对象注册全局的 $store。

基于这些信息,我们就可以在 Nuex.js 文件中实现 state 的功能了。

只需要在 Store 构造函数中将创建Store时需要共享的数据添加到Store上面,这样将来我们就能通过this.$store拿到这个Store,既然能拿到这个Store,我们就可以通过 .state 拿到需要共享的属性。

最终的代码如下:

class Store {
constructor(options) {
this.state = options.state;
}
}

将访问共享数据的代码放开,打开浏览器查看效果:

手撕Vuex-实现共享数据的更多相关文章

  1. Vue总结第六天:Vuex (全局变量管理~多个页面共享数据)

    Vue总结第六天:Vuex (全局变量管理~多个页面共享数据) 目录 一.Vuex (全局变量管理~~多个页面共享数据) ✿ 更详细的可以看官网:开始 | Vuex 1.什么是Vuex? 2.核心概念 ...

  2. MySQL通过bin log日志恢复数据|手撕MySQL|对线面试官

    关注微信公众号[程序员白泽],进入白泽的知识分享星球 前言 作为<手撕MySQL>系列的第二篇文章,今天介绍一下MySQL的二进制日志(bin log),注意不要和MySQL的InnoDB ...

  3. Netty实现高性能IOT服务器(Groza)之手撕MQTT协议篇上

    前言 诞生及优势 MQTT由Andy Stanford-Clark(IBM)和Arlen Nipper(Eurotech,现为Cirrus Link)于1999年开发,用于监测穿越沙漠的石油管道.目标 ...

  4. 手撕RPC框架

    手撕RPC 使用Netty+Zookeeper+Spring实现简易的RPC框架.阅读本文需要有一些Netty使用基础. 服务信息在网络传输,需要讲服务类进行序列化,服务端使用Spring作为容器.服 ...

  5. NN入门,手把手教你用Numpy手撕NN(一)

    前言 这是一篇包含极少数学推导的NN入门文章 大概从今年4月份起就想着学一学NN,但是无奈平时时间不多,而且空闲时间都拿去做比赛或是看动漫去了,所以一拖再拖,直到这8月份才正式开始NN的学习. 这篇文 ...

  6. NN入门,手把手教你用Numpy手撕NN(2)

    这是一篇包含较少数学推导的NN入门文章 上篇文章中简单介绍了如何手撕一个NN,但其中仍有可以改进的地方,将在这篇文章中进行完善. 误差反向传播 之前的NN计算梯度是利用数值微分法,虽容易实现,但是计算 ...

  7. NN入门,手把手教你用Numpy手撕NN(三)

    NN入门,手把手教你用Numpy手撕NN(3) 这是一篇包含极少数学的CNN入门文章 上篇文章中简单介绍了NN的反向传播,并利用反向传播实现了一个简单的NN,在这篇文章中将介绍一下CNN. CNN C ...

  8. 编译原理--05 用C++手撕PL/0

    前言 目录 01 文法和语言.词法分析复习 02 自顶向下.自底向上的LR分析复习 03 语法制导翻译和中间代码生成复习 04 符号表.运行时存储组织和代码优化复习 05 用C++手撕PL/0 在之前 ...

  9. 用C/C++手撕CPlus语言的集成开发环境(1)—— 语言规范 + 词法分析器

    序言 之所以叫做CPlus语言,是因为原本是想起名为CMinus的,结果发现GitHub和Gitee上一堆的CMinus的编译器(想必都是开过编译原理课程并且写了个玩具级的语言编译器的大佬们吧).但是 ...

  10. 面试中的MySQL主从复制|手撕MySQL|对线面试官

    关注微信公众号[程序员白泽],进入白泽的知识分享星球 前言 作为<手撕MySQL>系列的第三篇文章,今天讲解使用bin log实现主从复制的功能.主从复制也是MySQL集群实现高可用.数据 ...

随机推荐

  1. Sublime Text 16进制显示

    大文件推荐使用 UltraEdit 工具 Sublime Text 16进制显示(可以直接显示不同数据类型转换后的结果,不用在线工具,转二进制了) 安装 HexViewer 插件 1. Ctrl + ...

  2. Java 剑指offer(16) 打印1到最大的n位数

    题目 输入数字n,按顺序打印出从1最大的n位十进制数.比如输入3,则打印出1.2.3一直到最大的3位数即999. 思路 陷阱: n过大时是大数问题,不能简单用int或者long数据输出,需要采用字符串 ...

  3. AtCoder Beginner Contest 175 (AB水,C数学,D思维+前缀和处理+进价思考,E方阵+条件DP,F新回文字符串处理 GJ)

    补题链接:Here A - Rainy Season 如果不是 RSR 型的话直接计算 R 的数量即可 B - Making Triangle 给定 \(N\) 根长度分别为 \(L_i\) 的棍子, ...

  4. vivo平台化实践探索之旅-平台产品系列01

    vivo 互联网平台产品研发团队- Yang Yang 本篇为<vivo 平台产品>系列文章的第1篇.主要描述在业务高速发展的背景下,vivo软件工程师通过系统平台化建设等手段,逐步解决软 ...

  5. 深入理解web协议(二):DNS、WebSocket

    本文首发于 vivo互联网技术 微信公众号链接:https://mp.weixin.qq.com/s/AkbAN4UZLDf841g1ZLFPBQ作者:Wu Yue 本文系统性的讲述了 DNS 协议与 ...

  6. 一篇文章教你从入门到精通 Google 指纹验证功能

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/EHomjBy4Tvm8u962J6ZgsA作者:Sun Daxiang Google 从 An ...

  7. SAE 最佳实践范本:助力视野数科进入云原生“快车道”

    阿里云生态金融科技行业标杆 -- ​ 2021 年,云原生的商业价值正在被加速释放. ​ 一个公认的事实是,Serverless 是当下云原生方向内绝对的亮点.可以看作,它的出现,让企业用户真正地免除 ...

  8. P1216-DP【橙】

    在这道题中,我第一次用了memset,确实方便,不过需要注意的是只有全部赋值-1和0的时候才能使用它,否则他能干出吓死人的事.以及memset在cstring头文件里,在本地就算不include也能照 ...

  9. Angular系列教程之观察者模式和RxJS

    .markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rg ...

  10. Makeflie脚本使用

    1.目标 2.Makefile的作用 自动化编译仿真 文件有引用层级关系,Tb会引用RTL顶层,RTL顶层也会引用一些其他的小的模块,编译的时候被引用的文件需要先进行编译. 脚本有两种模式,debug ...