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

news2024/12/24 0:18:52

一、情景描述

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

这里就用到了Pinia的storeToRefs函数

二、案例

引入

  import {storeToRefs} from 'pinia'

结构赋值

  // 使用useCountStore,得到一个专门保存count相关的store
  const 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.coloradmin.cn/o/1564938.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【CANN训练营笔记】AscendCL图片分类应用(C++实现)

样例介绍 基于PyTorch框架的ResNet50模型,对*.jpg图片分类,输出各图片所属分类的编号、名称。 环境介绍 华为云AI1s CPU:Intel Xeon Gold 6278C CPU 2.60GHz 内存:8G NPU:Ascend 310 环境准备 下载驱动 wget ht…

CAPL实现关闭TCP连接的几种方式以及它们的区别

在讲正文前,我们有必要复习下关闭TCP连接的过程:四次挥手。 假设A和B建立TCP连接并进行数据传输,当A的数据发送完后,需要主动发起断开连接的请求: A发送FIN报文,发起断开连接的请求B收到FIN报文后,首先回复ACK确认报文B把自己的数据发送完,发送FIN报文,发起断开连接的…

探索网红系统功能菜单架构的设计与优化

随着社交媒体和数字化内容的普及,网红经济正在成为新兴的产业。在网红经济体系中,网红系统的功能菜单架构对于平台的用户体验和运营效率至关重要。本文将深入探讨网红系统功能菜单架构的设计与优化,为网红经济的发展提供新的思路和方法。 --…

HWOD:自守数

一、知识点 break只会结束最里面的一层循环 int型数按位比较的时候,可以直接求余比较,无需转换为char型数组后再按下标比较 二、题目 1、描述 自守数是指一个数的平方的尾数等于该数自身的自然数。例如:25^2 625,76^2 5776…

软考高级架构师:文件管理-位示图概念和例题

一、AI 讲解 文件管理在操作系统中负责文件的存储、检索、共享和保护。管理空闲空间是其中的一项重要任务,以确保文件系统的高效和灵活性。常见的空闲空间管理方法有空闲区表法、空闲链表法、位示图法和成组链表法。 下面通过表格形式概括这些方法的特点和应用场景…

Python快速入门系列-9(Python项目实战)

第九章:Python项目实战 9.1 开发一个简单的Web应用9.1.1 项目概述9.1.2 环境准备9.1.3 项目结构9.1.4 代码实现9.1.4.1 创建数据库模型9.1.4.2 创建视图9.1.4.3 实用工具函数9.1.4.4 运行应用9.1.5 模板设计9.2 数据分析与可视化项目9.2.1 项目概述9.2.2 环境准备9.2.3 数据分…

file_get_contents(‘php://input‘); 这个postman要如何传参

在 Postman 中传递参数给 file_get_contents(php://input); 是通过请求的 Body 部分来实现的。使用 Postman 进行 API 接口测试时,可以按照以下步骤来传递参数: 打开 Postman 并创建一个新的请求。在请求的 URL 地址栏输入你的 API 地址。选择请求方法为…

Spark实战:词频统计

文章目录 一、Spark实战:词频统计(一)Scala版1、分步完成词频统计2、一步搞定词频统计 (二)Python版1、分步完成词频统计2、一步搞定词频统计 二、实战总结 一、Spark实战:词频统计 (一&#x…

【Python时序预测系列】基于ConvLSTM实现单变量时间序列预测(源码)

这是我的第252篇原创文章。 一、引言 ConvLSTM是一种融合了卷积神经网络(CNN)和长短期记忆网络(LSTM)的混合神经网络结构,专门用于处理时空序列数据。ConvLSTM结合了CNN对空间特征的提取和LSTM对时间序列建模的能力&a…

CentOS7安装flink1.17完全分布式

前提条件 准备三台CenOS7机器,主机名称,例如:node2,node3,node4 三台机器安装好jdk8,通常情况下,flink需要结合hadoop处理大数据问题,建议先安装hadoop,可参考 hadoop安…

曲线降采样之道格拉斯-普克算法Douglas–Peucker

曲线降采样之道格拉斯-普克算法Douglas–Peucker 该算法的目的是,给定一条由线段构成的曲线,找到一条点数较少的相似曲线,来近似描述原始的曲线,达到降低时间、空间复杂度和平滑曲线的目的。 附赠自动驾驶学习资料和量产经验&…

【C++】哈希之位图

目录 一、位图概念二、海量数据面试题 一、位图概念 假如有40亿个无重复且没有排序的无符号整数,给一个无符号整数,如何判断这个整数是否在这40亿个数中? 我们用以前的思路有这些: 把这40亿个数遍历一遍,直到找到为…

AI音乐GPT时刻来临:Suno 快速入门手册!

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…

使用fusesource的mqtt-client-1.7-uber.jar,mqtt发布消息出去,接收端看到的是中文乱码,如何解决?

🏆本文收录于「Bug调优」专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&…

是否有替代U盘,可安全交换的医院文件摆渡方案?

医院内部网络存储着大量的敏感医疗数据,包括患者的个人信息、病历记录、诊断结果等。网络隔离可以有效防止未经授权的访问和数据泄露,确保这些敏感信息的安全。随着法律法规的不断完善,如《网络安全法》、《个人信息保护法》等,医…

基于Springboot+Mybatis实现个人理财系统

基于SpringbootMybatis实现个人理财系统 博主介绍:多年java开发经验,专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《500套》 欢迎点赞 收藏 ⭐留言 文末获取源码联系方式…

Python机器学习实验 数据处理之Numpy

一、实验目的 1. 了解numpy库的基本功能 2. 掌握Numpy库的对数组的操作与运算 二、实验工具: 1. Anaconda 2. Numpy 三、Numpy简介 Numpy 的英文全称为 Numerical Python,指Python 面向数值计算的第三方库。Numpy 的特点在于,针对 Pyt…

多模态学习实战手册:读懂CompassRank榜单的评测指标!

1. 前言 榜单链接:CompassRank CompassRank 是一个中立且全面的性能榜单,作为大模型评测体系 OpenCompass2.0 中各类榜单的承载平台。它覆盖多领域、多任务下的模型性能,并定期更新,以提供动态的行业洞察。 CompassRank 保持中立性,不受任何商业利益干扰,并依托于 Com…

Springboot集成knife4j (swagger)

1、添加依赖 在pom.xml 文件中添加 knife4j-spring-boot-starter 的依赖 <dependency> <groupId>com.github.xiaoymin</groupId> <artifactId>knife4j-spring-boot-starter</artifactId> <version>3.0.3</version> </depe…

D-迷恋网游(遇到过的题,做个笔记)

我的代码&#xff1a; #include <iostream> using namespace std; int main() {int a, b, c; //a表示内向&#xff0c;b表示外向&#xff0c;c表示无所谓cin >> a >> b >> c; //读入数 if (b % 3 0 || 3-b % 3 < c) //如果外向的人能够3人组成…