Vue3:用Pinia的storeToRefs结构赋值store数据

一、情景描述

我们学习了Pinia之后,知道,数据是配置在Pinia的state里面的。
那么,如果有多个字段需要取出来使用,并且不丢失数据的响应式,如何优雅的操作了?

这里就用到了Pinia的storeToRefs函数

二、案例

引入

  import {storeToRefs} from 'pinia'

结构赋值

  // 使用useCountStore,得到一个专门保存count相关的storeconst countStore = useCountStore()// storeToRefs只会关注sotre中数据,不会对方法进行ref包裹const {sum,school,address} = storeToRefs(countStore)

三、比对

Vue3中,有一个toRefs函数
那么,为什么不用这个函数了?

  console.log('!!!!!',storeToRefs(countStore))console.log('222222',toRefs(countStore))

在这里插入图片描述
可以看出,storeToRefs只会关注sotre中数据,不会对方法进行ref包裹

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/299703.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SQL语句的编写

##创建用户-建表建库 #创建一个用户名为 feng,允许从任何主机 % 连接,并使用密码 sc123456 进行身份验证的用户。 rootTENNIS 16:33 scmysql>create user feng% identified by sc123456; Query OK, 0 rows affected (0.04 sec) #创建一个名为fen…

Docker容器与虚拟化技术:OpenEuler 部署 Prometheus 与 Grafana

目录 一、实验 1.环境 2.OpenEuler 部署 Prometheus 3.OpenEuler 部署 Grafana 4.使用cpolar内网穿透 二、问题 1.拉取镜像失败 2.如何导入Grafana监控模板(ES) 一、实验 1.环境 (1)主机 表1 主机 系统架构版本IP备注…

Linux离线安装python3(源码编译)

1、下载python包 下载python3.9.6的源码包 python下载 下载后,解压,目录如下: -rw-------. 1 root root 1454 Aug 26 2023 anaconda-ks.cfg -rw-r--r--. 1 root root 25640094 Apr 4 21:52 Python-3.9.6.tgz drwxrwxr…

Composer Windows 安装

Composer 的下载地址为:Composer 1 运行安装程序 当启动安装程序后单击下一步继续。 选择 PHP 路径 如果你的计算机上没有安装 PHP 的话,Composer 的安装无法继续。 你需要选择你本地安装的 PHP 路径。 配置代理地址 默认的情况下,可以不…

C语言 输入输出语句讲解 标识符概念讲解

上文 C语言 预处理器 注释 基本案例讲解 我们讲了一些 预处理器等逻辑 那么 本文继续 C语言由一个或多个函数组成,每个程序都必须有一个main() 函数 因为每个程序总是从这个函数开始执行 main() 函数可以返回一个值,返回值为0表示程序正常结束 如果有多…

分类预测 | Matlab实现TCN-BiGRU-Mutilhead-Attention时间卷积双向门控循环单元多头注意力机制多特征分类预测/故障识别

分类预测 | Matlab实现TCN-BiGRU-Mutilhead-Attention时间卷积双向门控循环单元多头注意力机制多特征分类预测/故障识别 目录 分类预测 | Matlab实现TCN-BiGRU-Mutilhead-Attention时间卷积双向门控循环单元多头注意力机制多特征分类预测/故障识别分类效果基本介绍模型描述程序…

16-代码随想录206反转链表

16-代码随想录206反转链表 206.反转链表 力扣题目链接(opens new window) 题意:反转一个单链表。 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 206. 反转链表 给你单链表的头节点 head ,请你反转链表&…

harbor机器断电之后服务正常,但是不能访问问题

1.进到harbor目录查看harbor服务是否正常 2.检查监听端口 3.检查防火墙 4.检查ip端口转发(我这里刚刚开启,之前是关闭的。 1是开起,0是关闭) 5.改为之后重启就可以正常访问了

CCIE-10-IPv6-TS

目录 实验条件网络拓朴 环境配置开始Troubleshooting问题1. R25和R22邻居关系没有建立问题2. 去往R25网络的下一跳地址不存在、不可用问题3. 去往目标网络的下一跳地址不存在、不可用 实验条件 网络拓朴 环境配置 在我的资源里可以下载(就在这篇文章的开头也可以下…

UE4_如果快速做出毛玻璃效果_假景深

UE4_如果快速做出毛玻璃效果_假景深 2022-08-20 15:02 一个SpiralBlur-SceneTexture材质节点完成效果,启用半透明材质通过修改BlurAmount数值大小调整效果spiralBlur-SceneTexture custom节点,HLSL语言float3 CurColor 0;float2 BaseUV MaterialFloa…

JAVA面试八股文之框架相关

面试八股文 Spring和SpringMvc父子容器关系?实现AOP有几种方式?多节点定时任务重复执行问题?mybatisplus实现批量插入?springboot排除依赖?控制配置类的优先级?BeanFactory 和 ApplicationContext 的区别&a…

【论文阅读笔记】SAM-Adapter: Adapting Segment Anything in Underperformed Scenes

1.论文介绍 SAM-Adapter: Adapting Segment Anything in Underperformed Scenes SAM适配器:在表现不佳的场景中适配任何片段 2023年 ICCV Paper Code SAM Fails to Segment Anything? – SAM-Adapter: Adapting SAM in Underperformed Scenes: Camouflage, Shado…

吴恩达:AI 智能体工作流

热门文章推荐: (1)《为什么很多人工作 3 年 却只有 1 年经验?》(2)《一文掌握大模型提示词技巧:从战略到战术巧》(3)《AI 时代,程序员的出路在何方&#xff1…

Vue2(完结):replace属性、编程式路由导航、缓存路由组件、两个新钩子、路由守卫、history与hash

一、router-link的replace属性 1、作用:控制路由跳转时操作浏览器历史记录的模式 2、浏览器的历史记录有两种写入方式:分别为push和replace,push是追加历史记录,replace是替换当前记录。路由跳转时候默认为push 3、如何开启repla…

EXCEL地理数据处理工具(地图任务)

版本号 作者 修订内容 发布日期 1.0 小O 更新至0705版 2022-4-28 1.1 小O 更新至0772版 2024年4月3日 一、概述 小O地图EXCEL插件版提供基于EXCEL表格进行地理数据处理、地图可视化、地图绘图等功能,地理工具是用户使用频率很高的功能模块。地理工具能…

C语言交换两个变量值的方法,详细讲解

不管在学习哪门语言,都会遇到交换两个变量的这种问题,而且在面试测试题中也经常提到。既然出现的频率这么高,那我们今天就来讲讲交换两个变量常用的几种方法。 今天主要是基于C语言写的代码,不管哪种语言写的,应该核心…

Linux下Qt生成程序崩溃文件

文章目录 1.背景2.Qt编译生成程序2.1.profile模式的本质 3.执行程序,得到core文件4.代码定位4.1.直接使用gdb4.2.使用QtCreator 5.总结6.题外话6.1.profile模式和debug模式的区别 1.背景 在使用Qt时,假如在windows,当软件崩溃时,…

石油化工控制台定制厂家具备的专业条件一览

石油化工行业,作为国家的支柱产业之一,对设备与控制台的要求尤为严格。石油化工控制台是石油化工行业必不可少的办公设备之一。因此,选择一家专业的石油化工控制台定制厂家,对于提升企业的生产效率与安全水平具有不可估量的价值&a…

CTF之矛盾

这一题就是php的弱比较“” 这里要求输入的不是数字,并且输入要为1才打印flag 那我们就输入一个1后面接随便什么字符,因为php的弱比较将字符与数字进行比较的时候,会把字符转换成数字再比较,当转换到字符时后面便都为空了 flag{…

ChatGLM-6B实战微调(P-tuning-v2、LORA)

硬件准备 GPU: NVIDIA Tesla A30 24GB python 3.10 pytorch 1.11 transformers 4.27.1 实验环境 Change your pip source pip config set global.extra-index-url https://pypi.tuna.tsinghua.edu.cn/simple # Writing to /opt/conda/pip.conf pip config set global.inde…