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

Vue3——Pinia

news 来源：原创 2025/7/13 9:21:07

什么是 Pinia？

为什么选择 Pinia？

基本使用

安装pinia

配置pinia

定义store

使用

持久化插件

什么是 Pinia？

Pinia 是一个轻量级的状态管理库，专为 Vue 3 设计。它提供了类似 Vuex 的功能，但 API 更加简洁，并且完全支持 TypeScript。Pinia 的设计理念是简单、直观和可扩展，使其成为 Vue 3 生态系统中状态管理的理想选择。

官网：简介 | Pinia

为什么选择 Pinia？

简单易用：Pinia 的 API 设计简洁，学习曲线平缓。
TypeScript 支持：Pinia 原生支持 TypeScript，提供更好的类型推断和开发体验。
模块化设计：Pinia 允许你将状态拆分为多个模块，便于维护和扩展。
插件系统：Pinia 支持插件系统，可以轻松扩展功能（如持久化存储）。

基本使用

pinia的使用步骤：

在项目中安装pinia
配置pinia到main.js中
创建Store并导出
在其他组件中引入使用

安装pinia

需要在控制台使用命令：npm install pinia

配置pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'const app = createApp(App)
const pinia = createPinia() // 创建 Pinia 实例app.use(pinia) // 注册 Pinia
app.mount('#app')

定义store

在src目录下新建目录stores，在里面创建一个js文件，这里命名为User.js。在该文件使用defineStore函数，定义store的名称，数据或方法，最后导出。具体代码如下：

import { ref, reactive } from "vue";
import { defineStore } from "pinia";export const UserStore = defineStore('UserStore', () => {const user = reactive({name: "张三",age: 19})const num = ref(0)const speak = () => {console.log("userstore");}return {user, num, speak}
})

使用

接下来去其他组件中使用定义好的store。

import { UserStore } from './stores/User';
const user = UserStore()
console.log(user.user.age);

使用pinia定义的数据是所有组件共享的，当某个组件改变了它的值，其他使用了该数据的组件内的值也会随之改变

持久化插件

把pinia定义好的数据存储到本地的localstore中实现持。久化存储，这时需要使⽤⼀个插件：pinia-plugin-persistedstate。整体使用步骤和pinia差不多。

安装： npm i pinia-plugin-persistedstate

配置:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate) // 注册持久化插件app.use(pinia)
app.mount('#app')

启用持久化：只需在defineStore加上一个参数即可：

示例：说明数据是共享的，以及数据的持久化

user.js：

import { ref, reactive } from "vue";
import { defineStore } from "pinia";export const UserStore = defineStore('UserStore', () => {const user = reactive({name: "张三",age: 19})const num = ref(0)const speak = () => {console.log("userstore");}return {user, num, speak}
},{persist: true}
)

app.vue:

<script setup>
import { UserStore } from './stores/User';
import Son from './components/Son.vue';
const user = UserStore()
console.log(user.user.age);const add = ()=>{user.user.age++
}</script><template><div><router-view></router-view><button @click="add">修改一下store内的值</button><Son></Son></div>
</template><style scoped></style>

son.vue:

<script setup>
import { UserStore } from '../stores/User';
const user = UserStore()const asd=()=>{console.log(user.user.age);}
console.log(user.user.age);
</script><template><div><button @Click="asd">我是子组件的，点我打印store</button>{{ user.user.age }}</div>
</template><style scoped></style>

Vue3——Pinia

目录什么是 Pinia？ 为什么选择 Pinia？ 基本使用安装pinia 配置pinia 定义store 使用持久化插件什么是 Pinia？ Pinia 是一个轻量级的状态管理库，专为 Vue 3 设计。它提供了类似 Vuex 的功能，但 API 更加简…...

编程日记 2025/7/13 9:21:07

Java中Collections工具类中常用方法详解

文章从工具类的概述、常用方法的作用、实现原理到使用注意事项，都进行了详细说明，供你参考。 Java中Collections工具类中常用方法详解在Java开发中，集合是存储和处理数据的重要容器，而java.util.Collections工具类则提供了一组静…...

编程日记 2025/7/13 8:40:09

面经总目录——持续更新中

说明本面经总结了校招时我面试各个公司的面试题目，每场面试后我都及时进行了总结，同时后期补充扩展了同类型的相近面试题，校招时从两个方向进行投递，视觉算法工程师和软件开发工程师（C方向），所…...

编程日记 2025/6/29 0:33:14

电力设备智能化方案复盘

本文针对公司在售的一款电力设备智能化方案的运营情况进行复盘分析，提出一些基于研发人员角度的看法及建议，欢迎大家交流，因本人经验有限，多多包涵。具体的产品用途和公司名称不方便透露。 1.背景本方案是针对电网配电侧中某关键…...

编程日记 2025/6/29 1:10:36

Rocketmq刷盘机制和复制机制区别及关系

在RocketMQ中，刷盘机制和复制机制是两种不同但相互协作的机制，分别解决数据持久化和数据高可用的问题。它们的核心区别与关系如下： 一、刷盘机制（Flush Disk） 目标：解决单机数据持久化问题，确保…...

编程日记 2025/6/28 22:15:16

nmap扫描全端口 Nmap scan report for 10.129.243.117 Host is up, received echo-reply ttl 127 (0.47s latency). Scanned at 2025-05-18 21:12:56 EDT for 551s Not shown: 65512 filtered tcp ports (no-response) Bug in iscsi-info: no string output. PORT STATE …...

编程日记 2025/7/13 9:15:38

频分复用信号在信道中的状态

频分复用是一种将信道总带宽划分为多个互不重叠的子频带，每路信号占用一个子频带以实现多路信号并行传输的复用技术。 1、基本概念和原理频分复用（Frequency Division Multiplexing, FDM）的核心思想是通过频率划分实现多路信号共享同一物理…...

编程日记 2025/6/28 21:57:39

CSS之box-sizing、图片模糊、计算盒子宽度clac、（重点含小米、进度条案例）过渡

一、Box-sizing 在使用盒子模型时往往会出现由于border\ padding设置过大，从而导致的盒子被撑大的情况。此时可以设置box-sizing: border-box (padding和boeder加起来设置的值不可超出width) 此时不会撑大盒子。可在初始化时一起设置 * { padding:0; maigin:…...

编程日记 2025/6/28 21:59:16

AliSQL：阿里巴巴开源数据库的技术革新与应用实践

精心整理了最新的面试资料和简历模板，有需要的可以自行获取点击前往百度网盘获取点击前往夸克网盘获取引言在数据驱动的互联网时代，高性能、高可靠的数据库系统是支撑企业核心业务的关键。AliSQL作为阿里巴巴集团基于MySQL深度定制的开源分支&…...

编程日记 2025/6/28 22:11:07

（二十四）Java网络编程全面解析：从基础到实践

一、网络编程概述网络编程是现代软件开发中不可或缺的重要组成部分，它使得不同计算机上的程序能够相互通信和数据交换。Java作为一门成熟的编程语言，从最初版本就提供了强大的网络编程支持，使得开发者能够相对轻松地构建网络应用程序。 1.…...

编程日记 2025/6/29 0:13:18

50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Rotating Navigation （旋转导航）

📅 我们继续 50 个小项目挑战！—— Rotating Navigation 组件仓库地址：🔗https://github.com/SunACong/50-vue-projects 项目预览地址：🔗https://50-vue-projects.vercel.app/ ✨ 组件目标 &#x1f300…...

编程日记 2025/6/29 1:23:11

OpenCV 第6课图像处理之几何变换（重映射）

1. 概述简单来说，重映射就是把一副图像内的像素点按照规则映射到到另外一幅图像内的对应位置上去，形成一张新的图像。因为原图像与目标图像的像素坐标不是一一对应的。一般情况下，我们通过重映射来表达每个像素的位置（x,y），像这样： g(x,y)=f(h(x,y)) 在这里g()是目标图…...

编程日记 2025/6/29 1:18:28

传输层协议：UDP和TCP

1.传输层概念传输层主要负责两台主机之间的数据传输，使数据从发送端到接收端。端口号端口号标识了一个主机上进行通信的不同的应用程序。传输层接收到数据后，是要给到具体的应用层的进程。所以发送端的传输层封装报文时，就要添加上将来…...

编程日记 2025/7/10 10:45:38

[Linux] Linux线程信号的原理与应用

Linux线程信号的原理与应用文章目录 Linux线程信号的原理与应用**关键词****第一章理论综述****第二章研究方法**1. **实验设计**1.1 构建多线程测试环境1.2 信号掩码策略对比实验 2. **数据来源**2.1 内核源码分析2.2 用户态API调用日志与性能监控 **第三章 Linux信号的用法…...

编程日记 2025/6/28 21:57:46

MySQL 库的操作 -- 字符集和校验规则，库的增删查改，数据库的备份和还原

目录 1. 字符集和校验规则 1.1 查看系统默认字符集以及检验规则 1.2 查看数据库支持的字符集 1.3 查看数据库支持的字符集检验规则 1.4 校验规则对数据库的影响 2. 数据库的操作 2.1 创建数据库 2.1.1 语法 2.1.2 示例 2.2 查看数据库 2.2.1 语法 2.2.2 查看当前使…...

编程日记 2025/7/13 9:16:57

Opencv常见学习链接(待分类补充)

文章目录 1.常见学习链接 1.常见学习链接 1.Opencv中文官方文档 2.Opencv C图像处理：矩阵Mat 随机数RNG 计算耗时鼠标事件 3.Opencv C图像处理：亮度对比度饱和度高光暖色调阴影漫画效果白平衡浮雕羽化锐化颗粒感 4.OpenCV —— 频率域滤波&#xff…...

编程日记 2025/6/28 21:57:35

Docker网络全景解析：Overlay与Macvlan深度实践，直通Service Mesh集成核心

一、Docker网络基石：从单机到跨主机的本质跨越 1.1 网络模式全景图 Docker原生网络架构： ├─ 单机网络（默认） │ ├─ bridge：默认NAT模式（docker0网桥） │ ├─ host：共…...

编程日记 2025/6/29 0:42:24

十五、面向对象底层逻辑-BeanDefinitionRegistryPostProcessor接口设计

一、引言：Spring容器启动的核心枢纽在Spring容器的启动过程中，BeanDefinitionRegistryPostProcessor接口是开发者深度介入Bean定义注册阶段的核心扩展点。作为BeanFactoryPostProcessor的子接口，它赋予了开发者对BeanDefinitionRegistry的直…...

编程日记 2025/6/29 1:28:17

图表组件库TeeChart Pro VCL/FMX ：简化复杂数据处理的可视化利器

在数据驱动决策的时代，把复杂的数据转化为直观、易懂的图表，是很多人都面临的挑战。TeeChart Pro VCL/FMX 就是一款能帮你解决这个难题的强大工具，它为开发者和数据分析师提供了丰富的功能，让数据可视化变得简单又高效。一、丰富…...

编程日记 2025/6/28 23:53:22

从客厅到驾驶舱：FSHD 如何成为全场景显示「破局者」

一、当显示技术遇到「场景困境」：传统方案的三大痛点周末午后的客厅，阳光透过纱窗洒在幕布上，传统投影机的画面瞬间发白；高速公路上，车载 HUD 在强光下字迹模糊，驾驶员不得不频繁低头看仪表盘；…...

编程日记 2025/6/28 21:59:13

时源芯微｜开关电源电磁干扰的控制技术

要有效解决开关电源的电磁干扰问题，可从以下三个关键方面着手：其一，降低干扰源产生的干扰信号强度；其二，阻断干扰信号的传播路径；其三，提升受干扰体的抗干扰能力。基于此，开关电源电…...

编程日记 2025/6/28 22:03:35

动态规划之爬楼梯模型

文章目录爬楼梯模型LeetCode 746. 使用最小花费爬楼梯思路Golang 代码 LeetCode 377. 组合总和 Ⅳ思路Golang 代码 LeetCode 2466. 统计构造好字符串的方案数思路Golang 代码 LeetCode 2266. 统计打字方案数思路Golang 代码爬楼梯模型爬楼梯模型是动态规划当中的一个经典模型…...

编程日记 2025/7/8 3:16:36

图论学习笔记 3

自认为写了很多，后面会出仙人掌、最小树形图学习笔记。多图警告。众所周知王老师有一句话： ⼀篇⽂章不宜过⻓，不然之后再修改使⽤的时候，在其中找想找的东⻄就有点麻烦了。当然⽂章也不宜过多，不然想要的⽂章也不…...

编程日记 2025/6/28 21:57:43

进阶知识：自动化测试框架开发之无参的函数装饰器

进阶知识：自动化测试框架开发之无参的函数装饰器 from functools import wrapsdef func_2(func):"""无参的函数装饰器:param func::return:"""wraps(func)def wrap_func(*args, **kwargs):print(开始执行： func.__name__…...

编程日记 2025/6/28 21:57:38

【实验增效】5 μL/Test 高浓度液体试剂！Elabscience PE Anti-Mouse Ly6G抗体简化流式细胞术流程

产品概述 Elabscience 推出的 PE Anti-Mouse Ly6G Antibody (1A8, 货号: E-AB-F1108D) 是一款高特异性、高灵敏度的流式抗体，专为小鼠中性粒细胞（Ly6G⁺细胞）的精准检测而设计。该抗体采用PE（藻红蛋白）标记&#xff0…...

编程日记 2025/6/28 21:57:41

多模态光学成像革命：OCT、荧光与共聚焦的跨尺度融合新范式

一、技术融合的必然性在生物医学成像领域，单一模态往往存在视野-分辨率悖论。光学相干断层扫描（OCT）虽能实现毫米级深度扫描（1010mm视野），但其微米级分辨率难以解析亚细胞结构；荧光显微成像（FMI）虽具有分子特异性标记优势（88mm中观视野），却受限于光毒性及穿透深度…...

编程日记 2025/6/28 23:58:22

CHI中ordering的抽象

上图是一个典型的读操作过程中的几个流程，其中： compdata, 这个就是CHI协议保序之Comp保序-CSDN博客中提到的，comp保序，它实现的功能是，通知这个请求的RN, 你的请求，我已经开始处理了，同时也相当…...

编程日记 2025/7/5 22:05:47

华为云Flexus+DeepSeek征文 | 基于ModelArts Studio 与 Cline 快速构建AI编程助手

目录一、前言二、ModelArts Studio（MaaS）介绍与应用场景 2.1ModelArts Studio（MaaS）介绍 2.2 ModelArts Studio（MaaS）使用场景 2.3 开通MaaS服务 2.4 开通DeepSeek-V3商用服务三、Cline简介和安装 3.1 C…...

编程日记 2025/6/29 0:25:56

第二章何谓第二大脑？笔记记录

2025/05/08 发表想法用词太准确了，从信息过载-信息倦怠，正是我们当今社会信息工作者中正在经历的事情，同时大部分人也正在产生焦虑、不安、失眠等社会现象。原文：然而信息的泛滥，非但难以起到赋能作用，反…...

编程日记 2025/6/28 21:58:11

题解：AT_abc244_e [ABC244E] King Bombee

一道图上 DP 的好题。 （题目自己看，我就不说了。） 首先一看到求方案数，首先就要反应的是 DP 或者排列组合，反正考试的时候我写半天排列组合没写出来，所以就只能是 DP 了。（好牵强的理由啊………...

编程日记 2025/6/29 8:39:41

C++显式声明explicit

C显示声明explicit 在 C 中，explicit 关键字用于修饰单参数构造函数或多参数构造函数（C11 起），其核心作用是禁止编译器的隐式类型转换。一、必须加 explicit 的典型场景 1. 单参数构造函数当构造函数只有一个参数时&#xff…...

编程日记 2025/6/28 23:37:16

哈希查找方法

已知哈希表长度为11，哈希函数为H（key）＝key％11，随机产生待散列的小于50的8个元素，同时采用线性探测再散列的方法处理冲突。任意输入要查找的数据，无论是否找到均给出提示信息。 int f…...

编程日记 2025/7/11 8:45:57

AI编程辅助哪家强？深度解析主流AI编程工具的现状与未来-优雅草卓伊凡

AI编程辅助哪家强？深度解析主流AI编程工具的现状与未来-优雅草卓伊凡引言：AI编程的崛起与开发者的新选择在当今快速发展的科技时代，AI编程辅助工具已经成为开发者不可或缺的得力助手。作为一名资深的程序员，”优雅草卓伊凡”经…...

编程日记 2025/6/28 22:14:18

Python打卡训练营day27-函数-装饰器

知识点回顾： 装饰器的思想：进一步复用函数的装饰器写法注意内部函数的返回值作业： 编写一个装饰器 logger，在函数执行前后打印日志信息（如函数名、参数、返回值） 装饰器实际上是一个增强函数，它…...

编程日记 2025/6/28 21:58:21

EtherCAT通信协议

EtherCAT（Ethernet for Control Automation Technology）是一种高性能的实时工业以太网通信协议，专为工业自动化和控制系统的需求设计。它结合了以太网的灵活性和工业实时通信的高效性，广泛应用于运动控制、机器人、过程自动化等领…...

编程日记 2025/6/29 1:13:01

多线程下如何保证事务的一致性

以下是关于Java多线程的详细介绍，适合作为知识博客的内容。我将从基础概念开始，逐步深入到分布式场景、线程池配置以及Spring Cloud集成等高级主题，并提供丰富的业务场景示例。 Java多线程核心概念 1. 线程与进程的区别进程：程…...

编程日记 2025/7/13 2:28:09

OpenCv高阶（8.0）——答题卡识别自动判分

文章目录前言一、代码分析及流程讲解（一）初始化模块正确答案映射字典（题目序号: 正确选项索引）图像显示工具函数 （二）轮廓处理工具模块（三）几何变换核心模块二、主处理流程图像读取…...

编程日记 2025/6/28 23:40:45

量子通信技术：原理、应用与未来展望

在当今数字化时代，信息安全是全球关注的焦点。随着量子计算技术的飞速发展，传统的加密方法面临着前所未有的挑战。量子通信技术作为一种新兴的通信手段，以其绝对安全的特性，为信息安全领域带来了新的希望。本文将深入探讨量子通信…...

编程日记 2025/6/28 22:13:10

Token的组成详解：解密数字身份凭证的构造艺术

在当今的互联网身份认证体系中，Token如同数字世界的"安全护照"，承载着用户的身份信息和访问权限。据统计，现代应用中80%以上的身份验证依赖于Token机制。本文将深入解析Token的各个组成部分，通过典型实例揭示其设计原理…...

编程日记 2025/6/29 1:27:12

【SFT监督微调总结】大模型SFT全解析：从原理到工具链，解锁AI微调的核心密码

文章目录一. 什么是监督微调（SFT）？二. SFT的核心原理与流程2.1 基本原理2.2 训练流程三、SFT训练的常用方法四、SFT训练用的数据格式4.1、基础单轮指令格式1. Alpaca 格式2. 单轮QA格式3. 代码-注释对4.2、多轮对话格式1. ShareGPT 格式2. 层次化对话格式3. 角色扮演对话4.…...

编程日记 2025/6/28 22:08:53

MacBook Air A2179（Intel版）安装macOS Catalina所需时间

MacBook Air A2179（Intel版）安装macOS Catalina所需时间如下： 一、标准安装时间范围常规安装（通过App Store） • 下载时间：约30-60分钟（取决于网络速度，安装包约8GB） •…...

编程日记 2025/6/29 1:32:04

Git的windows开发与linux开发配置

Git的基本配置安装 linux可以使用包管理器安装windows可以使用 mingw的git：https://git-scm.com/downloadsTortoiseGit：https://tortoisegit.org/download/ 配置分为系统配置–system、全局配置–global、项目配置–local 配置名称和邮箱 git co…...

编程日记 2025/6/28 21:58:22

使用Mathematica绘制一类矩阵的特征值图像

学习过线性代数的，都知道：矩阵的特征值非常神秘，但却携带着矩阵的重要信息。今天，我们将展示：一类矩阵，其特征值集体有着很好的分布特征。 modifiedroots[c_List] : Block[{a DiagonalMatrix[ConstantAr…...

编程日记 2025/6/28 23:26:14

C++中的宏

0 资料最值宏do{}while(0)的宏封装技巧 1 最值宏 - C最值的宏，在两个头文件中，分别为cfloat和climits。其中，float的最值宏在cfloat中，且cfloat没有负值的最小宏，而其他char、int和double是在climits中。如下// --…...

编程日记 2025/6/29 0:41:07

谷粒商城的三级分类实现

先查出全部的数据再分类分类的一级分类是根据数据的Parent_id进行确定的，所以要进行筛选： 主方法： public List<CategoryEntity> listWithTree() {//1.查出所有分类List<CategoryEntity> entities baseMapper.selectList(nul…...

编程日记 2025/6/29 0:42:13

基于大模型预测的闭合性髌骨骨折诊疗全流程研究报告

目录一、引言 1.1 研究背景与目的 1.2 研究意义与价值二、大模型预测原理与方法 2.1 大模型概述 2.2 预测方法与数据输入 2.3 模型训练与优化三、术前预测分析 3.1 骨折类型预测 3.2 损伤程度评估 3.3 潜在风险预测四、手术方案制定 4.1 传统手术方案对比 4.…...

编程日记 2025/6/28 21:57:50

基于CodeBuddy的Craft完成一个数字华容道的小游戏

参考 CodeBuddy，AI 时代的智能编程伙伴插件功能入门总结本文主要基于CodeBuddy的Craft 完成一个数字华容道的小游戏，如果读者还不清楚怎么安装，在本文的前面附上了CodeBuddy 编程助手的安装步骤。读者可以根据需求自行确定从那开始。 …...

编程日记 2025/6/28 22:03:42

一文掌握vue3基础，适合自学入门案例丰富

Vue3 本文从Vue3的基础语法出发，全面系统的介绍了Vue3的核心概念与应用，旨在帮助自学者更轻松地掌握Vue3。文章内容由浅入深，从通过CDN引入Vue3开始，逐步介绍了组合式API、模块化开发、以及常见的Vue3指令和功能并从单个html的使…...

编程日记 2025/6/28 21:58:51

OpenHarmony 5.0设置应用设置手势导航开关打开后重新关闭导航栏和设置界面重合

目录 1.背景 2.解决方案 1.背景在OpenHarmony 5.0中从设置界面打开手势导航开关然后重新关闭，此时设置界面导航栏和设置列表主界面重合，导致设置界面无法点击最下面的关于设备 2.解决方案首先参考之前的如何设置导航栏文档，我们可以自己…...

编程日记 2025/6/28 23:30:29

[ARM][汇编] 02.ARM 汇编常用简单指令

目录 1.数据传输指令 MRS - Move from Status Register 指令用途指令语法代码示例读取 CPSR 到通用寄存器在异常处理程序中读取 SPSR 使用场景 MSR - Move to Status Register 指令语法使用场景示例代码改变处理器模式为管理模式设置条件标志位异常处理…...

编程日记 2025/6/28 22:17:35

什么是 Pinia？

为什么选择 Pinia？

基本使用

安装pinia

配置pinia

定义store

使用

持久化插件

相关文章：