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

一、情景描述

我们学习了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包裹

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【信贷后台管理系统之axios的二次封装(四)】

文章目录 一、axios的二次封装二、配置后端接口地址三、登录接口api联调四、贷款申请接口api编写联调 一、axios的二次封装 示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。 src下新建utils,新建request.js用来封装axios 控…

用户体验:探讨Facebook如何优化用户体验

在数字化时代,用户体验是社交媒体平台成功与否的关键因素之一。作为全球最大的社交媒体平台之一,Facebook一直在努力优化用户体验,从功能设计到内容呈现再到隐私保护,不断提升用户满意度。本文将深入探讨Facebook如何优化用户体验…

解决GNU Radio+USRP实现OFDM收发在接收端存在误码问题

文章目录 前言一、OFDM 收发流程1、OFDM 收端流程2、OFDM 收端流程 二、问题所在1、find_trigger_signal 函数解读2、general_work 函数3、问题所在 三、修改源码四、运行结果1、频谱2、传输数据测试 五、调试小技巧六、资源自取 前言 在使用 GNU Radio 时使用官方例程搭建 GN…

游戏引擎中的物理系统

一、物理对象与形状 1.1 对象 Actor 一般来说,游戏中的对象(Actor)分为以下四类: 静态对象 Static Actor动态对象 Dynamic Actor ---- 可能受到力/扭矩/冲量的影响检测器 TriggerKinematic Actor 运动学对象 ---- 忽略物理法则…

华为审核被拒提示: 您的应用存在(最近任务列表隐藏风险活动)的行为,不符合华为应用市场审核标准

应用审核意见: 您的应用存在(最近任务列表隐藏风险活动)的行为,不符合华为应用市场审核标准。 修改建议:请参考测试结果进行修改。 请参考《审核指南》第2.19相关审核要求:https://developer.huawei.com/c…

【opencv】教程代码 —videoio(2)将两个视频的每一帧逐一读取并计算其PSNR 和MSSIM...

本教程开始介绍的源代码将对每一帧执行PSNR测量,并且只对PSNR低于输入值的帧进行SSIM测量。为了可视化的目的,我们在OpenCV窗口中展示两幅图像,并将PSNR和MSSIM值打印到控制台。期望看到如下内容: video-input-psnr-ssim.cpp 将两…

JeeSite Vue3:前端开发控制实现基于身份角色的权限验证

随着技术的飞速发展,前端开发技术日新月异。在这个背景下,JeeSite Vue3 作为一个基于 Vue3、Vite、Ant-Design-Vue、TypeScript 和 Vue Vben Admin 的前端框架,引起了广泛关注。它凭借其先进的技术栈和丰富的功能模块,为初学者和团…

IP代理检测:判断IP质量优劣要注意什么?

做跨境电商的用户们往往对IP代理这个词都不会感到陌生,那么如何去评判IP的优劣势以及再选择IP时需要注意什么呢? 首先要知道的是IP代理检测是确保网络安全、提高网络访问效率以及满足特定需求的重要步骤。在判断IP代理质量优劣时,有几个关键…

使用阿里云试用Elasticsearch学习:1.1 基础入门——入门实践

阿里云试用一个月:https://help.aliyun.com/search/?kelastic&sceneall&page1 官网试用十五天:https://www.elastic.co/cn/cloud/cloud-trial-overview Elasticsearch中文文档:https://www.elastic.co/guide/cn/elasticsearch/guide…

剑指Offer题目笔记24(集合的组合、排序)

面试题79: 问题: ​ 输入一个不含重复数字的数据集合,找出它的所有子集。 解决方案: ​ 使用回溯法。子集就是从一个集合中选出若干元素。如果集合中包含n个元素,那么生成子集可以分为n步,每一步从集合中…

数据可视化:智慧农业发展的催化剂

数据可视化在智慧农业中发挥着不可替代的作用。随着科技的不断进步,农业领域也在不断探索创新,以提高生产效率、优化资源利用,从而实现可持续发展。而数据可视化技术的应用,则成为了实现智慧农业目标的重要途径。下面我就从可视化…

ABAP OOALV标题设置

ABAP OOALV标题设置 OOALV默认标题是SAP,需要我们自己创建GUI 标题 创建GUI 标题,写好要展示的描述 添加截图中的代码即可。 下面的ALV 报表标题修改的位置在以下代码区域。 这时候通过查询layout(wa_layout TYPE lvc_s_layo&#xff0…

mini2440移植lvgl(v8.2)

目录 概述 1 下载源码 1.1 登录LVGL git地址 1.2 LVGL linux平台上的库文件介绍 1.3 下载代码 1.3.1 下载lvgl 1.3.2 下载lv_drivers 1.3.3 下载lv_port_linux_frame_buffer 2 配置编译环境 2.1 创建工程目录 2.2 完善工程目录下的文件 2.2.1 构建工程文件 2.2.2 匹…

Oracle常用sql命令(新手)

1、备份单张表 创建复制表结构 create table employeesbak as select * from cims.employees 如果只复制表结构,只需要在结尾加上 where 10 插入数据 insert into employeesbak select * from cims.employees 删除一条数据 delete from…

水泥设备如何实现物联网远程监控?

水泥设备如何实现物联网远程监控? 在当今的工业4.0时代,水泥行业正在经历一场深度的技术革新,其中构建智慧工厂并采用物联网远程监控解决方案成为了提升生产效率、保障产品质量、实现节能减排的关键路径。该方案通过集成先进的信息技术、物联…

list使用与模拟实现

目录 list使用 reverse sort unique splice list模拟实现 类与成员函数声明 节点类型的定义 非const迭代器的实现 list成员函数 构造函数 尾插 头插 头删 尾删 任意位置插入 任意位置删除 清空数据 析构函数 拷贝构造函数 赋值重载函数 const迭代器的设计 …

【PostgreSQL】用pgAdmin轻松管理PostgreSQL

pgAdmin 是一个功能强大的开源Web界面工具,专为管理和维护PostgreSQL数据库而设计。它提供了一个直观的图形界面,使得用户能够轻松地执行复杂的数据库操作,如查询、更新、导入/导出数据以及管理数据库对象等。pgAdmin 支持几乎所有的PostgreS…

EasyExcel 模板导出excel、合并单元格及单元格样式设置。 Freemarker导出word 合并单元格

xls文件: 后端代码: InputStream filePath this.getClass().getClassLoader().getResourceAsStream(templateFile);// 根据模板文件生成目标文件ExcelWriter excelWriter EasyExcel.write(orgInfo.getFilename()).excelType(ExcelTypeEnum.XLS).withTe…

redis 数据库的安装及使用方法

目录 一 关系数据库与非关系型数据库 (一)关系型数据库 1,关系型数据库是什么 2,主流的关系型数据库有哪些 3,关系型数据库注意事项 (二)非关系型数据库 1,非关系型数据库是…

37.HarmonyOS鸿蒙系统 App(ArkUI) 创建第一个应用程序hello world

HarmonyOS App(ArkUI) 创建第一个应用程序helloworld 线性布局 1.鸿蒙应用程序开发app_hap开发环境搭建 3.DevEco Studio安装鸿蒙手机app本地模拟器 打开DevEco Studio,点击文件-》新建 双击打开index.ets 复制如下代码: import FaultLogger from ohos.faultL…