当前位置：首页 > news >正文

Pinia最基本用法

news 来源：原创 2025/9/7 4:28:33

1. 定义 Store

首先，定义一个 Pinia Store，使用组合式 API 风格和 ref 来管理状态。

示例：`stores/ids.js`

import { defineStore } from 'pinia';
import { ref } from 'vue';export const useIdsStore = defineStore('ids', () => {const ids = ref([]); // 默认值是一个空数组const setIds = (val) => {ids.value = val; // 更新 ids 的值};return {ids,setIds,};
});

ids 是一个响应式变量，默认值为 []。
setIds 是一个方法，用于更新 ids 的值。

2. 在第一个页面修改值

在第一个页面中，调用 setIds 方法来更新 ids 的值。

示例：第一个页面（`PageA.vue`）

<template><div><h1>页面 A</h1><button @click="assignValue">设置 IDs</button><router-link to="/page-b">跳转到页面 B</router-link></div>
</template><script setup>
import { useIdsStore } from '@/stores/ids.js';const idsStore = useIdsStore();// 设置 ids 的值
function assignValue() {const newIds = [1, 2, 3]; // 假设这是要赋的值idsStore.setIds(newIds); // 调用 setIds 方法赋值console.log('IDs 已设置:', idsStore.ids); // 打印确认
}
</script>

点击按钮后，调用 setIds 方法将 [1, 2, 3] 赋值给 ids。
可以通过 console.log 确认赋值是否成功。

3. 在第二个页面获取最新值

在第二个页面中，使用 storeToRefs 提取响应式状态，并显示最新的 ids 值。

示例：第二个页面（`PageB.vue`）

<template><div><h1>页面 B</h1><p>从页面 A 获取的 IDs: {{ ids }}</p></div>
</template><script setup>
import { storeToRefs } from 'pinia';
import { useIdsStore } from '@/stores/ids.js';const idsStore = useIdsStore();
const { ids } = storeToRefs(idsStore); // 提取响应式状态// 如果需要调试，可以打印 ids 的值
console.log('当前 IDs:', ids.value);
</script>

使用 storeToRefs 提取 ids，确保它是响应式的。
在模板中直接使用 {{ ids }}，Vue 会自动解包 ref，无需手动写 .value。

4. 关键点解析

(1) 全局状态共享

Pinia 的状态是全局共享的。无论你在哪个页面或组件中访问同一个 Store，都会获取到相同的状态。

(2) 数据持久性

默认情况下，Pinia 的状态是存储在内存中的。如果你刷新页面，状态会重置为初始值（即 []）。如果需要跨页面刷新保留状态，可以启用持久化插件。

启用持久化插件

安装插件：

npm install pinia-plugin-persistedstate

配置持久化：

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

在 Store 中启用持久化：

import { defineStore } from 'pinia';
import { ref } from 'vue';export const useIdsStore = defineStore('ids', () => {const ids = ref([]);const setIds = (val) => {ids.value = val;};return {ids,setIds,};
}, {persist: true, // 启用持久化
});

这样，即使页面刷新，ids 的值也不会丢失。

Pinia最基本用法

1. 定义 Store 首先，定义一个 Pinia Store，使用组合式 API 风格和 ref 来管理状态。示例：stores/ids.js import { defineStore } from pinia; import { ref } from vue;export const useIdsStore defineStore(ids, () > {const ids …...

编程日记 2025/9/7 4:28:33

MySQL中的UNION和UNION ALL【简单易懂】

一、前言 UNION 和 UNION ALL 是 SQL 中用于合并多个查询结果集的关键字。二、核心作用两者均用于将多个 SELECT 语句的结果集纵向合并（列结构需相同），但行为存在关键差异： 三、使用场景对比需要去重时：例如合并…...

编程日记 2025/9/3 20:34:00

ConcurrentHashMap 源码分析

摘要介绍线程安全集合类 ConcurrentHashMap 源码，包括扩容，协助扩容，红黑树节点读写线程同步，插入元素后累加键值对数量操作原子性实现。 1 成员变量及其对应的数据结构底层由数组红黑树链表实现volatile long baseCount 和 v…...

编程日记 2025/9/6 23:01:29

一种基于学习的多尺度方法及其在非弹性碰撞问题中的应用

A learning-based multiscale method and its application to inelastic impact problems 摘要： 我们在工程应用中观察和利用的材料宏观特性，源于电子、原子、缺陷、域等多尺度物理机制间复杂的相互作用。多尺度建模旨在通过利用固有的层次化结构来理解…...

编程日记 2025/9/4 0:23:19

【DE2-115】Verilog实现DDS+Quartus仿真波形

【DE2-115】Verilog实现DDSQuartus仿真波形一、任务要求二、实现步骤2.1 相位累加器2.2 波形存储器ROM2.2.1 方波模块2.2.2 正弦波形存储器 2.3 3锁相环倍频电路2.4 顶层电路设计三、设计实现四、实验总结一、任务要求采用数字频率合成（Direct Digital Frequen…...

编程日记 2025/9/4 19:59:15

StickyNotes，简单便签超实用

日常工作中是不是经常需要记点东西，但又不想用太复杂的工具？今天给你推荐一款超简单的桌面便签软件——StickyNotes。下面是动图： 简单到极致的便签工具 StickyNotes真的是简单到不能再简单了。打开软件，直接输入你的便签内容&a…...

编程日记 2025/8/29 10:11:43

深度探索 C 语言：指针与内存管理的精妙艺术

C 语言作为一门历史悠久且功能强大的编程语言，以其高效的性能和灵活的底层控制能力，在计算机科学领域占据着举足轻重的地位。指针和内存管理是 C 语言的核心特性，也是其最具挑战性和魅力的部分。深入理解指针与内存管理，不仅能够…...

编程日记 2025/8/28 0:38:41

重开也不是不可能 ~.~ 浅拷贝 #include <iostream> #include <cstring>class ShallowCopyExample { public:int m_nValue;int* m_pData;// 构造函数，初始化指针成员ShallowCopyExample(int value) : m_nValue(value) {m_pData new int(0);*m_pData va…...

编程日记 2025/9/4 3:09:23

【3】k8s集群管理系列--包应用管理器helm之chart资源打包并推送到harbor镜像仓库

一、chart资源打包 helm package ./web-chart # 当前目录会生成一个tgz的压缩文件二、安装help push插件（用于推送前面打包的文件，到镜像仓库） .1 下载help-push二进制文件 wget https://github.com/chartmuseum/helm-push/releases/down…...

编程日记 2025/9/5 4:01:20

React与Vue：选择哪个框架入门？

React与Vue：选择哪个框架入门？ 作为前端开发者，我在React和Vue两个框架间切换多次，常被新手问到应该从哪个入手。不同于网上那些详尽的技术比较，这里我想从实用角度给你一个简明对比。两大框架核心差异特性ReactV…...

编程日记 2025/8/29 20:52:21

pycharm已有python3.7，如何新增Run Configurations中的Python interpreter为python 3.9

在 PyCharm 中，如果你已经安装了 Python 3.9，并且希望在 Run Configurations 中新增一个 Python 3.9 的解释器，可以按照以下步骤操作： 步骤 1：打开 PyCharm 设置点击 PyCharm 左上角的 File 菜单。选择 Settings&am…...

编程日记 2025/9/5 3:22:57

STL之迭代器（iterator）

迭代器的基本概念迭代器(iterator)模式又称为游标(Cursor)模式，用于提供一种方法顺序访问一个聚合对象中各个元素, 而又不需暴露该对象的内部表示。或者这样说可能更容易理解：Iterator模式是运用于聚合对象的一种模式，通过运用该模式&#…...

编程日记 2025/9/2 12:58:19

Mysql5.7配置文件

Mysql5.7配置文件初始化数据库之前修改my.cnf----配置持久化键(persistence key) 初始化数据库之前修改my.cnf----配置持久化键(persistence key) 使用utf8mb4而不是utf8： https://blog.csdn.net/omaidb/article/details/106481406 https://blog.csdn.net/fdipzo…...

编程日记 2025/9/6 9:36:00

HarmonyOS-ArkUI V2装饰器: @Provider和@Consumer装饰器：跨组件层级双向同步

作用我们在之前学习的那些控件中，各有特点，也各有缺陷，至今没有痛痛快快的出现过真正能跨组件的双向绑定的装饰器。比如 @Local装饰器，不能跨组件@Param装饰器呢，能跨组件传递，但是仅仅就是下一层组件接收参数。另外，它是单向传递，不可被重新赋值。如果您非要改值则…...

编程日记 2025/8/29 12:00:43

【HarmonyOS 5】敏感信息本地存储详解

【HarmonyOS 5】敏感信息本地存储详解前言鸿蒙其实自身已经通过多层次的安全机制，确保用户敏感信息本地存储安全。不过再此基础上，用户敏感信息一般三方应用还需要再进行加密存储。本文章会从鸿蒙自身的安全机制进行展开，最后再说明本地…...

编程日记 2025/9/3 0:48:17

0x03.Redis 通常应用于哪些场景？

回答重点 1）缓存(Cache)： Redis 最常用的场景是作为缓存层，以减少数据库的负载，提高数据读取速度。例如，常用的用户会话数据和页面渲染结果可以存储在 Redis 中。2）分布式锁(Distributed Lock)： Redis 可以用作分布式锁的实现，确保在分布式系统中资源的安全访问，避免…...

编程日记 2025/9/6 8:01:50

Keil创建自定义的STM32标准库工程

注：以下工程创建将以STM32F103ZET6为例 1 下载需要的资料包 1.1 下载 Keil 的 STM32F103 芯片支持包 1.1.1 手动下载安装包 Keil官网：https://www.keil.com/ （1）进入官网，点击 Download。 （2&#xf…...

编程日记 2025/9/2 1:07:40

React(1)基础入门

React(1)基础入门 Author: Once Day Date: 2025年4月10日一位热衷于Linux学习和开发的菜鸟，试图谱写一场冒险之旅，也许终点只是一场白日梦… 漫漫长路，有人对你微笑过嘛… 全系列文章可参考专栏: FullStack开发_Once-Day的博客-CSDN博客 …...

编程日记 2025/9/2 8:56:12

Mysql8配置文件

Mysql8配置文件修改my.cnf----配置持久化键(persistence key)配置表名不区分大小写修改my.cnf----配置持久化键(persistence key) MySQL8初始化数据库之前配置好这些变量值，初始化数据库之后可能无法修改这个值。 # 服务端配置 [mysqld] ######## 数据目录和基…...

编程日记 2025/9/4 17:17:27

c/c++ 使用libgeotiff读取全球高程数据ETOPO

#include <geotiff.h> #include <geotiffio.h> #include <tiffio.h> #include <iostream> #include <xtiffio.h> void MyTIFFErrorHandler(const char* module, const char* fmt, va_list args) {// 格式化错误消息char buffer[1024];vsnprintf(…...

编程日记 2025/9/6 14:19:11

Spring Boot集成Nacos

1. 添加依赖在pom.xml文件中添加Nacos相关依赖。根据Spring Boot版本选择合适的依赖版本： Spring Boot 3.2.x版本 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-config</artif…...

编程日记 2025/9/4 7:04:27

CAP理论与 BASE理论

一、分布式系统存在的问题 1.分布式系统 20世纪90年代，随着互联网应用的快速扩张，传统单机系统难以支撑高并发、跨地域的数据处理需求。分布式系统（Distributed System） 逐渐成为主流架构，分布式系统是由多台计算机&…...

编程日记 2025/9/1 16:03:21

C++(21)—类和对象(下) ⑥匿名对象

文章目录一、匿名对象的定义与基本特性二、匿名对象与有名对象的对比1. 有名对象2. 匿名对象三、匿名对象的构造与析构时机1. 构造与析构规则2. 示例分析四、匿名对象的适用场景1. 临时调用对象方法2. 作为函数参数五、总结一、匿名对象的定义与基本特性匿名对象&#x…...

编程日记 2025/9/3 4:31:53

Go环境变量配置

Go环境变量配置一、下载进入The Go Programming Language 点击下载对应操作系统的安装成功界面如下图,默认安装到: usr/local/go/ 安装完成之后，在终端运行 go version，如果显示类似下面的信息，表明安装成功（备注:darwin(其实…...

编程日记 2025/8/27 1:22:04

AI推理强，思维模型也有功劳【58】二八定律思维

giszz的理解：二八定律，我们说的和听的都比较多。20%的关键，是事物本质，做人不要贪心，也不要胡子眉毛一把抓。当然，也不要轻视那80%。一、定义二八定律思维模型，也被称为帕累托法则&#xff0…...

编程日记 2025/9/4 19:25:45

文件上传靶场

文件上传靶场项目结构 upload-lab/ ├── Dockerfile └── www├── index.php└── upload└── flag.txt执行命令流程（逐行执行） 创建目录结构 # 创建目录结构 mkdir upload-lab;cd upload-lab mkdir -p www/upload# 创建flag文件 echo &qu…...

编程日记 2025/9/5 12:56:19

RV1106 OCR 识别算法

一题记目标是在某款 RV1106 低算力小板下跑通OCR文字识别算法，做个简单的应用，RK 官方模型库rk_model_zoo 有PP-OCR 的例子，但在 rv1106 上尚未支持。于是便打算折腾一吧。二方案甄选参考国外某大佬的比较： 对比了几种方案…...

编程日记 2025/9/5 8:55:25

Linux实现翻译以及群通信功能

1.翻译功能实现 UdpServer.hpp文件构造函数接收一个端口号和一个回调函数，回调函数是传入一个执行方法，比如翻译方法。 UdpServer(uint16_t port,func_t func):_sockfd(defaultfd),_port(port),_isrunning(false),_func(func){}Init函数首先创建了…...

编程日记 2025/9/6 16:33:23

[MRCTF2020]ezpop wp

本题考点:php反序列化的pop链首先来了解一下pop链是什么,它类似于多米诺骨牌一环套一环,要调用这个成员方法然后去找能调用这个方法的魔术方法,最后一环接一环,完成一个链子,最终形成payload。那么来了解一下这些魔术方法 __construct() //类的构造函数&#xff0…...

编程日记 2025/9/6 13:29:55

机器学习入门之Sklearn基本操作

、 Sklearn全称:Scipy-toolkit Learn是一个基于scipy实现的的开源机器学习库。它提供了大量的算法和工具，用于数据挖掘和数据分析，包括分类、回归、聚类等多种任务。本文我将带你了解并入门Sklearn在机器学习中的基本用法。获取方式 pip install sc…...

编程日记 2025/9/3 7:08:28

（二十二）安卓开发中的数据存储之SQLite简单使用

在Android开发中，SQLite是一种非常常用的数据库存储方式。它轻量、简单，非常适合移动设备上的数据管理。本文将通过通俗易懂的语言，结合代码示例和具体场景，详细讲解SQLite在Android中的使用。 1. 什么是SQLite? SQLite是一个开…...

编程日记 2025/9/5 7:41:34

docker compose搭建博客wordpress

一、前言 docker安装等入门知识见我之前的这篇文章 https://blog.csdn.net/m0_73118788/article/details/146986119?fromshareblogdetail&sharetypeblogdetail&sharerId146986119&sharereferPC&sharesourcem0_73118788&sharefromfrom_link 1.1 docker co…...

编程日记 2025/9/7 1:23:34

信息学奥赛一本通 1498：Roadblocks | 洛谷 P2865 [USACO06NOV] Roadblocks G

【题目链接】 ybt 1498：Roadblocks 洛谷 P2865 [USACO06NOV] Roadblocks G 【题目考点】 1. 图论：严格次短路径严格次短路的路径长度必须大于最短路的路径长度。非严格次短路的路径长度大于等于最短路的路径长度。【解题思路】每个交叉路口是一…...

编程日记 2025/9/3 11:20:31

学习笔记—C++—类和对象（三）

目录类和对象再探构造函数类型转换隐式类型转换显式类型转换 C语言风格类型转换 C风格类型转换 static_cast dynamic_cast const_cast reinterpret_cast static成员友元友元函数友元类友元成员函数内部类匿名对象匿名对象的使用场景：…...

编程日记 2025/9/6 20:08:59

句句翻译。

对这些单词整理，格式为：“overall /əʊvərɔːl/ adj.全面的,综合的,总体的adv.全部,总计,一般来说,大致上,总体上n.外套,罩衣,工装连衣裤,工装服 ” 4,4 A review published in January in Experimental Dermatology found that ceramide made sk…...

编程日记 2025/9/4 1:19:25

LeetCode 2999.统计强大整数的数目：上下界数位DP

【LetMeFly】2999.统计强大整数的数目：上下界数位DP 力扣题目链接：https://leetcode.cn/problems/count-the-number-of-powerful-integers/ 给你三个整数 start ，finish 和 limit 。同时给你一个下标从 0 开始的字符串 s ，表示一…...

编程日记 2025/9/3 8:26:20

具身导航中的视觉语言注意力蒸馏！Vi-LAD：实现动态环境中的社会意识机器人导航

作者：Mohamed Elnoor 1 ^{1} 1, Kasun Weerakoon 1 ^{1} 1, Gershom Seneviratne 1 ^{1} 1, Jing Liang 2 ^{2} 2, Vignesh Rajagopal 3 ^{3} 3, and Dinesh Manocha 1 , 2 ^{1,2} 1,2单位： 1 ^{1} 1马里兰大学帕克分校电气与计算机工程系， 2…...

编程日记 2025/9/3 4:09:58

FreeRTOS入门与工程实践-基于STM32F103(一)(单片机程序设计模式,FreeRTOS源码概述,内存管理,任务管理,同步互斥与通信,队列,信号量)

裸机程序设计模式裸机程序的设计模式可以分为：轮询、前后台、定时器驱动、基于状态机。前面三种方法都无法解决一个问题：假设有A、B两个都很耗时的函数，无法降低它们相互之间的影响。第4种方法可以解决这个问题，但是实践起来有难…...

编程日记 2025/9/3 9:32:56

算法思想之位运算(二)

欢迎拜访：雾里看山-CSDN博客本篇主题：算法思想之位运算(二) 发布时间：2025.4.13 隶属专栏：算法目录滑动窗口算法介绍六大基础位运算符常用模板总结例题判定字符是否唯一题目链接题目描述算法思路代码实现汉明距离题目链接题目…...

编程日记 2025/9/4 18:00:33

软考笔记day04

寻址方式 CISC RISC 流水线技术存储系统 1、层次化存储系统 2、Cache 3、主存编址计算输入输出技术 I/O 总线...

编程日记 2025/9/3 6:22:38

本地电脑如何连接windows云服务器

进行远程连接需要几个数据：用户名、密码、公网IP 打开本地cmd，输入命令mstsc打开远程连接面板， 在计算机输入框中输入云服务器的IP地址点击“选项”展开，点击“本地资源”，然后点击“详细信息” 用户名通常为admin…...

编程日记 2025/9/4 15:01:45

Linux内核常见的调度策略

在 Linux 内核中，调度策略决定了任务如何被分配 CPU 时间以及任务之间的优先级关系。以下是五种常见的调度策略：STOP、DL（Deadline）、RT（Real-Time）、CFS（Completely Fair Scheduler&#xff09…...

编程日记 2025/9/6 21:49:44

【Linux】进程优先级、进程切换、进程调度

Linux 1.进程优先级1.基本概念2.查看进程1.UID2.PRI、NI3.修改优先级（PRI） 3.竞争、独立、并行、并发 2.进程切换3.进程调度1.活动队列2.过期队列3.active、expired指针 1.进程优先级 1.基本概念优先级：进程得到 CPU 资源分配的先后顺序。优…...

编程日记 2025/9/6 19:27:54

HCIP第十二天

LSA --- 链路状态通告链路状态类型，链路状态ID，通告路由器 --- LSA的三元组 --- 可以唯一的标识出一条LSA Type --- OSPFv2中，常见的需要掌握LSA有6种 LS ID --- LSA的名字 --- 因为每一种LSA LS ID的生成方式都不相同，所以&am…...

编程日记 2025/9/3 17:16:23

Magnet Pro Macbook窗口分屏管理软件【提高效率工具】

Magnet Pro Macbook窗口分屏管理软件【提高效率工具】一、介绍 Magnet Pro for Mac，是一款功能强大的窗口分屏管理软件，具有多种布局模式、窗口布局功能和其他工具，可以帮助您高效地进行多任务处理和管理工作。拖动窗口到边缘&#xff0c…...

编程日记 2025/9/5 15:27:29

控制单元（Control Unit, CU）

一、控制单元的定义与核心作用控制单元是 CPU 的核心部件之一，负责解析指令、生成控制信号并协调各硬件部件的工作时序，确保指令按预定流程正确执行。核心定位：计算机系统的“指挥中心”，通过控制总线与运算器、存储器、…...

编程日记 2025/9/2 20:18:06

JavaWeb 课堂笔记 —— 10 MySQL DML + DQL

本系列为笔者学习JavaWeb的课堂笔记，视频资源为B站黑马程序员出品的《黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖SpringMyBatisSpringMVCSpringBoot等）》，章节分布参考视频教程，为同样学习…...

编程日记 2025/9/5 7:16:49

基于 LSTM 的多特征序列预测-SHAP可视化！

往期精彩内容： 单步预测-风速预测模型代码全家桶-CSDN博客半天入门！锂电池剩余寿命预测（Python）-CSDN博客超强预测模型：二次分解-组合预测-CSDN博客 VMD CEEMDAN 二次分解，BiLSTM-Attention预测模型…...

编程日记 2025/9/4 15:09:30

【C++】哈希扩展海量数据处理

目录位图位图面试题 C库中的位图bitset 位图优缺点位图相关题目布隆过滤器布隆过滤器的介绍布隆过滤器的应用海量数据处理位图位图面试题 1.给40亿个不重复的无符号整数，没排过序。给一个无符号整数，如何快速判断一个整数是否在这40亿…...

编程日记 2025/9/2 3:29:09

考研数据结构精讲：数组与特殊矩阵的压缩存储技巧（包含真题及解析）

考研数据结构精讲：数组与特殊矩阵的压缩存储技巧一、数组基础概念 1.1 数组的定义数组是由相同数据类型的元素构成的有限序列，具有以下核心特性： 维度特性：支持一维到多维结构（常见二维数组）随机访问…...

编程日记 2025/9/4 11:01:51