首页 > 其他分享 >手撕Vuex-实现共享数据

手撕Vuex-实现共享数据

时间:2023-10-28 15:45:01浏览次数:33  
标签:Vuex state Nuex store 共享 数据 Store

经过上一篇章介绍,完成了添加全局 $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;
    }
}

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

image-20231028153242085

标签:Vuex,state,Nuex,store,共享,数据,Store
From: https://www.cnblogs.com/BNTang/p/17794149.html

相关文章

  • mysql大批量删除数据,工作记录
    在10万记录的三张关系表中删除相对应的数据,三张表为层级嵌套关系优化查询目的:减少mysql数据库慢查询导致的长时间占据锁的情况出现优化方向:将慢sql改为多次执行的快sql,避免长时间占用mysql资源情况出现多表查询会用到的几种方式连表查询SELECTevent_data.idFROMevent......
  • 数据结构与算法(LeetCode) 第二节 链表结构、栈、队列、递归行为、哈希表和有序表
    一、链表结构1.单向链表节点结构publicclassNode{ publicintvalue;publicNodenext;publicNode(intdata){value=data;}}2.双向链表节点结构publicclassDoubleNode{publicintvalue;publicDoubleNodelast;publicDouble......
  • 数据结构与算法(LeetCode)第一节:认识复杂度,对数器,二分法与异或运算
    一、认识复杂度1.评估算法优劣的核心指标:时间复杂度:当完成了表达式的建立,只要把最高阶项留下即可。低阶项都去掉,高阶项的系数也去掉,记为O(去掉系数的高阶项);​ 时间复杂度是衡量算法流程的复杂度的一种指标,该指标只与数据量有关,与过程之外的优化无关常见的时间复杂度(从好到坏)O......
  • [考研] 数据结构
    针对数据结构的部分学习笔记。栈出栈排列个数:\(C_{2n}^n\),卡特兰数栈模拟中缀转后缀原理:中缀转后缀的原理是单调栈(维护一个优先级递增的栈),从栈底到栈顶的优先级必然递增,输出时可以保证优先级高的先输出(出栈)。中缀表达式和后缀表达式的不同仅在于符号位置不同,数字之间相......
  • 手撕Vuex-添加全局$store
    经过上一篇的介绍,了解到了Vuex的实现本质就是一个插件,所以要做的事情就是实现这个插件的代码编写即可。本篇文章主要是实现一个全局的$store,这个$store是挂载在Vue的原型上的,所以在任何一个组件当中都可以通过this.$store访问到。我们先来看看Vue官方的,我们分别在Ap......
  • 评论功能的选择难题:数据结构如何选定?
    尊敬的小伙伴们,大家好!我是小米,一个热爱技术、热衷分享的90后程序员。今天,我要和大家一起探讨一个在软件开发中常见,却又充满深度的话题——"面试题:评论功能采用什么数据结构?"。在这个数字化时代,几乎每个应用程序都需要实现评论功能。无论是社交媒体、电子商务网站还是新闻阅读应用,评......
  • 西北电专大二电院_数据结构上机报告记录_第二次上机报告
    第二次上机报告只要求提交了顺序串和顺序栈的基本操作的实现,这里把剩下两个也补充上去 顺序栈——进制转换1.问题描述本程序基于栈功能实现一个进制转换程序。(用顺序栈完成此题)InitStack()函数用于构造一个空栈;StackEmpty()函数用于判断栈是不是空栈;Push()函数实现将......
  • P8820 [CSP-S 2022] 数据传输
    已经知道坑点的情况下暴力+正解想+写还是用了2h……调试速度太慢了。所以场上如果想多肝出一道题的话,简单题必须在10min~40min结束战斗啊!以及对于这种数据范围小到一眼就需要分类讨论的题目,一定要多思考不同数据下的差异。\(k\le2\)时不难想到对于每次询问朴素dp,此时我......
  • 麒麟KYLINOS2303版本上使用KDE桌面共享软件
    往期文章:龙芯3A5000上安装软件hello,大家好啊,今天给大家推荐一个在麒麟KYLINOS桌面操作系统2303版本上使用KDE桌面共享软件的文章,通过安装KDE桌面共享软件,可以让远程vnc客户端连接访问本机桌面,进行一系列的远程操作,欢迎大家分享转发。关注我吧!1、查看系统信息pdsyw@pdsyw-pc:~/桌面$......
  • 数据结构与算法 → 深入数据结构
    前置知识前端数据及结构-链表-单向链表......