Pinia+Router学习笔记(三)

简介: 本节记录解构Store过程中的相关操作及注意事项

Pinia不允许直接解构Store,因为Store背后使用的是proxy对象,直接解构会导致其失去响应式

<template>
    <div>pinia:{{ Test.current }}---{{ Test.name }}---{{ Test.num }}</div>
</template>

<script setup lang="ts">
import { useTestStore } from './Store'

const Test = useTestStore()
let { current, num } = Test
current = '失去了响应式'
</script>

<style scoped></style>

此时修改解构出来的数据将不会对模板上的内容产生任何影响。为了解决这个问题,Pinia提供了storeToRefs来为这些数据重新恢复响应式,不过要额外加上.value(和toRef相同,给里面的数据包裹一层响应式对象)

<template>
    <div>pinia:{{ Test.current }}---{{ Test.name }}---{{ Test.num }}</div>
</template>

<script setup lang="ts">
import { useTestStore } from './Store'
import { storeToRefs } from 'pinia';

const Test = useTestStore()
let { current, num } = storeToRefs(Test)
current.value = '现在我是响应式的了'
</script>

<style scoped></style>

这种用法和直接Test.current = '现在我是响应式的了'相同

相关文章
|
JSON 数据可视化 前端开发
可视化表单&试卷搭建平台技术详解
可视化表单&试卷搭建平台技术详解
236 0
|
canal 消息中间件 关系型数据库
系统重构数据同步利器之Canal实战篇
系统重构数据同步利器之Canal实战篇
1224 1
|
Linux 数据安全/隐私保护 Windows
更换(Pypi)pip源到国内镜像
pip国内的一些镜像 阿里云 http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.
247130 2
|
测试技术 API
阿萨学工具:用Apifox 发送接口请求
阿萨学工具:用Apifox 发送接口请求
414 0
|
11月前
|
弹性计算 Prometheus 运维
一文详解阿里云可观测体系下标签最佳实践
在当今数字化转型加速的时代,企业 IT 系统的复杂度与日俱增,如何高效地管理和监控这些系统成为了一项挑战。阿里云作为全球领先的云计算服务商,提供了一整套全面的可观测性解决方案,覆盖从业务、端侧(小程序、APP、H5 等)、应用、中间件、容器/ECS 等全栈的监控体系,旨在帮助企业构建强大而灵活的可观测性体系。其中,标签(Tag)作为一种核心组织和管理手段,在阿里云可观测体系中扮演着至关重要的角色。本文将深入探讨阿里云可观测系列产品中标签的应用,以及如何运用标签在阿里云可观测产品体系下进行体系化建设并给出相关最佳实践。
963 209
|
12月前
|
缓存 JavaScript 前端开发
Node.js模块化的基本概念和分类及使用方法
Node.js模块化的基本概念和分类及使用方法
210 0
|
6月前
|
存储 安全 Java
深入理解 Java 中的 instanceof 关键字
本文深入解析了 Java 中的 `instanceof` 关键字,探讨其在类型判断中的作用。作为二元操作符,`instanceof` 可用于检查对象是否为某类实例或实现特定接口,避免类型转换异常 (`ClassCastException`)。文章通过多态性下的类型判断、安全类型转换、接口实现检测及集合元素类型判定等实际应用场景,展示了 `instanceof` 的强大功能。掌握该关键字可提高代码健壮性,确保运行时类型安全。
382 0
|
10月前
|
安全 Linux KVM
Linux虚拟化技术:从Xen到KVM
Xen和KVM是Linux平台上两种主要的虚拟化技术,各有优缺点和适用场景。通过对比两者的架构、性能、安全性、管理复杂性和硬件依赖性,可以更好地理解它们的适用场景和选择依据。无论是高性能计算、企业虚拟化还是云计算平台,合理选择和配置虚拟化技术是实现高效、稳定和安全IT环境的关键。
449 8
|
11月前
|
人工智能 编解码 BI
LEOPARD:腾讯AI Lab西雅图实验室推出的视觉语言模型
LEOPARD是由腾讯AI Lab西雅图实验室推出的视觉语言模型,专为处理含有大量文本的多图像任务设计。该模型通过自适应高分辨率多图像编码模块和大规模多模态指令调优数据集,在多个基准测试中表现卓越,适用于自动化文档理解、教育和学术研究、商业智能和数据分析等多个应用场景。
294 2
LEOPARD:腾讯AI Lab西雅图实验室推出的视觉语言模型
|
12月前
|
机器学习/深度学习 人工智能 自然语言处理
软件测试中的人工智能:现状与未来
【10月更文挑战第6天】 本文探讨了人工智能在软件测试中的应用,包括自动化测试、智能缺陷分析以及测试用例生成等方面。通过案例分析和未来趋势预测,文章展示了AI如何提高软件测试的效率和准确性,并指出了当前面临的挑战和未来的发展方向。
173 1