pinia的使用

ops/2024/10/10 15:54:25/

 搭建pinia环境

pinia:集中式状态管理工具,用于各组件之间共享数据(多个组件会用到的数据才考虑放到pinia中)

vue2中使用的是vuex

1.终端输入:npm i pinia

2.

vue组件中出现pinia

用pinia存储+读取数据

要想好什么组件的什么数据要放入pinia,就是某个组件你希望哪些数据可以和别的组件共享

例:把Count.vue组件的sum、LoveTalk.vue组件的talkList放入pinia

1.在src文件夹下面创建store文件夹(store就是pinia的一个具体体现)

2.在store文件夹下面创建count.ts和loveTalk.ts文件

3.将想要存储到pinia中的数据写进去

3.在组件中导入对应的store并且删除已经放入store中的数据定义,使用store中的数据

4.在网页的pinia组件中就可以看到你创建的store

pinia修改数据的三种方式

修改方法3:当你在actions中添加判断函数之后,所有组件都可以使用这个判断函数,是一种优化,复用的思想

storeToRefs

之前学过toRefs,知道在解构一个响应式对象的一些属性时会让这些属性失去响应式,所以解构的时候要用toRefs包一下

直接解构出来数据就可以在引用数据时清爽一点

原本引用时要 countStore.sum....

解构出来:直接用数据名

但是不能用toRefs来将解构出来的数据变成ref定义的响应式数据,因为这样的话他会把store中的所有数据全部变成ref的,即使是没有用过的数据

要用storeToRefs,这样他只会把数据变成ref的,不会关注方法


http://www.ppmy.cn/ops/43930.html

相关文章

Yolov5保姆及入门-含源码【推荐】

前言 YOLO系列模型作为一种实时目标检测算法,自从YOLO1发布以来,就以其检测速度快、准确率高而受到广泛关注。随着技术的迭代,YOLO系列已经发展到了YOLO8。本文将详细介绍YOLO5的技术规格、应用场景、特点以及性能对比。 yolov5源码下载地址…

Python图形界面(GUI)Tkinter笔记(八):用【Label()】方法制作九九乘数表

主要是使用"config()"方法来体现函数式、模块化的美好风景。把需随时要修改的控件参数定义在“config()”方法里且把它封装在一个函数中,这时只需对这函数内的“config()”方法作出相应的修改即可,无需对主代码或全部代码重新修一遍。这也是Py…

python-docx 在word中指定位置插入图片或表格

docx库add_picture()方法不支持对图片位置的设置 1、新建一个1行3列的表格,在中间的一列中插入图片 from docx import Document from docx.shared import Pt from docx.oxml.shared import OxmlElement from docx.enum.text import WD_ALIGN_PARAGRAPHdef add_cen…

LeetCode 题解:112. 路径总和,递归,JavaScript,详细注释

原题链接: 112. 路径总和 解题思路: 如果求根节点到叶子节点的路径上的节点值之和,假设共有3个节点,那么写成计算式是val1 val2 val3 sum那么将计算式转换就可以得到val3 sum - val1 - val2也就是说,问题可以从…

PyTorch Conv2d 前向传递中发生了什么?

在PyTorch中,nn.Conv2d 是一个用于二维卷积操作的模块。当你对一个输入张量(通常是一个四维的,形状为 [batch_size, channels, height, width])调用 forward 方法(或直接使用模块作为函数调用)时,Conv2d 会执行一系列的计算来产生输出张量。 以下是 Conv2d 前向传递中发…

NIO的ByteBuffer和Netty的ByteBuf的性能

在讨论Java NIO的ByteBuffer与Netty的ByteBuf的性能时,需要考虑几个主要的因素,因为性能表现并不是绝对的,而是依赖于具体的使用场景。Netty的ByteBuf设计更加现代,针对网络编程的需求进行了优化,包含了许多ByteBuffer…

C++ RPC ORM 高速解析

支持所有常用编程语 https://capnproto.org/GitHub - capnproto/capnproto: Capn Proto serialization/RPC system - core tools and C library https://capnproto.org/capnproto-c-win32-1.0.2.zip 常用命令: capnp help capnp compile -oc myschema.capn…

LeeCode 3165 线段树

题意 传送门 LeeCode 3165 不包含相邻元素的子序列的最大和 题解 考虑不含相邻子序列的最大和,在不带修改的情况下容易想到,以最后一个元素是否被选取为状态进行DP。从线性递推的角度难以处理待修改的情况。 从分治的角度考虑,使用线段树…