【前端知识】Vue3状态组件Pinia详细介绍
Vue3状态组件Pinia详细介绍
- 关联知识
Pinia 组件介绍、核心原理及使用方式
Pinia 组件介绍
Pinia 是 Vue.js 的官方状态管理库，专为 Vue 3 设计，提供简洁的 API 和强大的 TypeScript 支持。其核心组件包括：
• Store：状态存储容器，包含状态、计算属性和操作。
• State：响应式数据，类似组件的 data。
• Getters：基于状态的计算属性，类似 computed。
• Actions：同步或异步操作，用于修改状态。
核心原理
• 基于 Vue 3 的响应式系统（reactive 和 ref），通过 Proxy 实现状态监听。
• 无嵌套模块结构，每个 Store 独立管理，通过组合式 API 组织代码。
• 去除了 Vuex 中的 mutations，直接通过 actions 修改状态。
使用方式
// 定义 Store
import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),getters: {double: (state) => state.count * 2,},actions: {increment() {this.count++;},},
});// 在组件中使用
import { useCounterStore } from '@/stores/counter';export default {setup() {const counter = useCounterStore();return { counter };},methods: {handleClick() {counter.increment();},},
};
Vuex 组件介绍、核心原理及使用方式
Vuex 组件介绍
Vuex 是 Vue 的官方状态管理库，适用于 Vue 2 和 3。其核心组件包括：
• State：单一状态树，存储全局状态。
• Getters：派生状态，类似计算属性。
• Mutations：同步修改状态的方法。
• Actions：提交 mutations 的异步操作。
• Modules：将 store 分割成模块。
核心原理
• 基于 Vue 2 的响应式系统（Object.defineProperty），通过深度监听实现状态管理。
• 严格区分同步操作（mutations）和异步操作（actions），确保状态变更可追踪。
• 通过模块化（modules）组织大型应用的状态。
使用方式
// 定义 Store
const store = new Vuex.Store({state: { count: 0 },mutations: {INCREMENT(state) {state.count++;},},actions: {increment({ commit }) {commit('INCREMENT');},},getters: {double: (state) => state.count * 2,},
});// 在组件中使用
export default {computed: {...Vuex.mapGetters(['double']),},methods: {...Vuex.mapActions(['increment']),},
};
Pinia 与 Vuex 对比
Pinia 的优点
- 简洁的 API：
无需mutations，直接通过actions修改状态，减少样板代码。 - TypeScript 支持：
完全类型推断，无需额外配置。 - 模块化自然：
每个 Store 独立，通过文件组织模块。 - 轻量高效：
体积更小（约 1KB），基于 Vue 3 响应式系统性能更优。 - Composition API 集成：
与 Vue 3 的组合式 API 无缝结合。
Vuex 的优点
- 成熟稳定：
长期作为 Vue 官方库，社区资源丰富。 - 严格模式：
强制通过mutations修改状态，适合需要严格跟踪变更的项目。 - 时间旅行调试：
与 Vue DevTools 深度集成，支持状态快照和回滚（Pinia 需插件支持）。
Pinia 的缺点
• 对 Vue 2 的支持需额外安装 @vue/composition-api。
• 部分高级功能（如插件系统）不如 Vuex 完善。
Vuex 的缺点
• 繁琐的模板代码：
必须区分 mutations 和 actions，增加代码量。
• TypeScript 支持有限：
需手动声明类型，类型推断较弱。
• 模块配置复杂：
嵌套模块导致代码结构臃肿。
使用场景建议
• 新项目或 Vue 3 项目：优先选择 Pinia，享受更简洁的 API 和更好的 TypeScript 支持。
• 现有 Vuex 项目：若无痛点可继续使用；若需简化代码或迁移到 Vue 3，逐步替换为 Pinia。
• 需要严格状态追踪：Vuex 的严格模式可能更适合金融、医疗等严谨场景。
代码对比示例
// Pinia（直接修改状态）
const store = useStore();
store.count = 10; // 允许直接修改（需开启严格模式则禁止）// Vuex（必须通过 mutation）
store.commit('SET_COUNT', 10); // 必须提交 mutation
总结
Pinia 凭借其简洁性、轻量化和对 Vue 3 的原生支持，成为现代 Vue 项目的首选状态管理工具。而 Vuex 在需要严格状态追踪或维护旧项目时仍有价值。两者选择取决于项目需求和技术栈版本。
关联知识
【前端知识】Vue组件Vuex详细介绍
Pinia官网地址
相关文章：
【前端知识】Vue3状态组件Pinia详细介绍
Vue3状态组件Pinia详细介绍 关联知识 Pinia 组件介绍、核心原理及使用方式 Pinia 组件介绍 Pinia 是 Vue.js 的官方状态管理库，专为 Vue 3 设计，提供简洁的 API 和强大的 TypeScript 支持。其核心组件包括： • Store：状态存储容器…...
YOLO旋转目标检测之ONNX模型推理
YOLO旋转检测相较于目标检测而言，其只是最后的输出层网络发生了改变，一个最明显的区别便是：目标检测的检测框是xywh，而旋转检测则为xywha，其中，这个a代表angle，即旋转角度，其余的基本…...
C++八股--three day --设计模式之单例和工厂
对于C编程中的思想，最常见的就是考察设计模式了 那么我们在面试中常考的设计模式包含以下几种：单例模式， 接下来我们按顺序介绍 1.单例模式： 一个类只能创建一个实例：常应用于日志模块，数据库模块 …...
GAMES202-高质量实时渲染（Assignment 2）
目录 作业介绍环境光贴图预计算传输项的预计算Diffuse unshadowedDiffuse shadowedDiffuse Inter-reflection(bonus) 实时球谐光照计算 GitHub主页：https://github.com/sdpyy1 作业实现:https://github.com/sdpyy1/CppLearn/tree/main/games202 作业介绍 物体在不同…...
一、Shell 脚本基础
一、Shell 简介 1.Shell 的定义与作用 Shell，通常被称为命令行解释器 (Command Line Interpreter)，是用户 👤 与 Linux/Unix 操作系统内核进行交互 ↔️ 的“桥梁” 🌉。它扮演着翻译官 🗣️ 的角色： 接…...
redis持久化-RDB
redis持久化-RDB 文档 redis单机安装redis常用的五种数据类型redis数据类型-位图bitmapredis数据类型-基数统计HyperLogLogredis数据类型-地理空间GEOredis数据类型-流Streamredis数据类型-位域bitfield 官方文档 官网操作命令指南页面：https://redis.io/docs/l…...
经典算法 石子合并问题
石子合并问题 问题描述 在一个园形操场的四周摆放N堆石子,现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆合并成新的一堆，并将新的一堆的石子数，记为该次合并的得分。试设计出一个算法,计算出将N堆石子合并成1堆最大得分和最小得分。 输入描述…...
-100分)
2025A卷华为OD机试真题-数组二叉树(C++/Java/Python)-100分
2025华为OD机试题库-(2025A卷+E卷+D卷)-(JAVA、Python、C++) 目录 题目描述 输入描述 输出描述 示例 1 示例 2 解题思路 代码 c++ java python 题目描述 二叉树也可以用数组来存储，给定一个数组，树的根节点的值储存在下标1，对于储存在下标n的节点，他的左子节点…...
NHANES指标推荐：TyG指数
文章题目：Association between the Triglyceride-glucose index and fragility fractures among US adults: insights from NHANES DOI：10.1186/s13098-025-01669-w 中文标题：美国成年人甘油三酯-葡萄糖指数与脆性骨折之间的关联：…...
文件操作--文件下载读取漏洞
本文主要内容 文件下载 产生 任意语言代码下载功能函数 检测 白盒 代码审计 黑盒 漏扫工具、公开漏洞、手工看参数值及功能点（资源下载） 利用 常见文件 后台首页日志等可见文件 敏感文件 数据库配置文件、各种接口文件、密匙…...
4.0/Q2，Charls最新文章解读
文章题目：The nonlinear association of ratio of total cholesterol to high density lipoprotein with cognition ability: evidence from a community cohort in China DOI：10.3389/fnut.2025.1525348 中文标题：总胆固醇与高密度脂蛋白比值…...
Linux-常用监控工具
以下是对 Linux 系统中常用监控工具（netstat、ss、dmesg）的系统性介绍，涵盖其核心功能、典型用法及实际应用场景，帮助您分析系统状态和内核参数调整后的效果： 1. netstat -s：网络协议栈统计监控 功能 net…...
【HarmonyOS Next】地图使用详解（三）标点定位问题
背景 在使用geoLocationManager的getCurrentLocation方法获得的用户定位经纬度的坐标系为 WGS84 ，但是mapkit使用的是GCJ02坐标系。因此，我们在使用获取用户经纬度然后直接生成标记时，会出现坐标偏移问题。如下： 解决方案 使用…...
Linux运维中常用的磁盘监控方式
在Linux运维中，磁盘监控是一项关键任务，因为它能帮助我们预防磁盘空间不足或性能问题导致的服务中断或数据丢失。让我们来看看有哪些常用的磁盘监控方法吧！ 1. 查看磁盘使用情况（df命令） df命令用于显示文件系统的…...
、监听属性（Watch）)
前端面经-VUE3篇--vue3基础知识（二）计算属性(computed)、监听属性（Watch）
一、计算属性(computed) 计算属性（Computed Properties）是 Vue 中一种特殊的响应式数据，它能基于已有的响应式数据动态计算出新的数据。 计算属性有以下特性： 自动缓存：只有当它依赖的响应式数据发生变化时ÿ…...
双向链表详解
一、双向链表介绍 二、实现双向链表 1.定义双向链表的结构 2.双向链表的初始化 3.双向链表的尾插 4.双向链表的头插 5.双向链表的打印 6.双向链表的尾删 7.双向链表的头删 8.查找指定位置的数据 9.在指定位置之后插入数据 10.删除指定位置的数据 11.链表的销毁 三、…...
基于SpringBoot+Vue实现的电影推荐平台功能一
一、前言介绍： 1.1 项目摘要 2023年全球流媒体用户突破15亿，用户面临海量内容选择困难，传统推荐方式存在信息过载、推荐精准度低等问题。传统推荐系统存在响应延迟高（平均>2s）。随着互联网的快速发展，…...
预订接口优化：使用本地消息表保证订单生成、库存扣减的一致性
🎯 本文介绍了一种优化预订接口的方法，通过引入本地消息表解决分布式事务中的最终一致性问题。原先的实现是在一个事务中同时扣减库存和创建订单，容易因网络不稳定导致数据不一致。改进后的方法将业务操作和消息发送封装在本地事务中…...
深度学习与 PyTorch 基础
笔记 1 深度学习简介 1.1 深度学习概念 深度学习是机器学习的一类算法, 以人工神经网络为结构, 可以实现自动提取特征 深度学习核心思想是人工神经网络为结构, 自动提取特征 1.2 深度学习特点 自动提取特征 解释性差 大量数据和高性能计算能力 非线性转换(引入非线性因…...
libevent库详解：高性能异步IO的利器
目录 一、libevent 简介 主要特点： 二、事件模型原理 1. event_base 2. event 3. evconnlistener（TCP监听器） 4. bufferevent 简化流程如下： 三、libevent 使用示例 1. 创建事件主循环 2. 创建监听器（TCP&a…...
第一章：A Primer on Memory Consistency and Cache Coherence - 2nd Edition
引言： 许多现代计算机系统，包括同构和异构架构的系统，都在硬件层面支持共享内存。在共享内存系统中，每个处理器核心都可以对单一的共享地址空间进行读写操作。对于共享内存计算机而言，内存一致性模型定义了其内存系统在…...
NVIDIA Omniverse在数字孪生中的算力消耗模型构建方法
引言：虚拟实验室的算力经济学 在高校虚拟实验室建设中，数字孪生系统的实时物理仿真精度与算力成本之间存在显著矛盾。以H800 GPU集群为例，单个8卡节点每秒可处理2.3亿个物理粒子交互，但若未建立精准的算力消耗模型，资…...
C++ 动态内存管理详讲
1. 四个全局函数的定义与作用 这四个函数只负责空间的开辟和释放，不会调构造和析构 (1) ::operator new cpp void* operator new(size_t size); // 全局版本 功能：分配 size 字节的未初始化内存。 底层实现：调用 malloc(size)。 调用场…...
纹理对象创建
纹理对象通俗点就是贴图，像游戏的皮肤什么就是纹理。常间的结构就是激活纹理单元（0-15有16个），将纹理对象挂在纹理单元上，纹理采样器需要采哪个样品就与哪个单元挂钩就行了，加载纹理对象需要用到stb_image库…...
如何利用dify 生成Fine‑tune 需要的Alpaca 格式数据
如果你选择llamafactory 格式进行微调，它只是格式是Alpaca格式，dify 的agent dsl 如下，你可以导入本地的dify 或者导入cloud 版本的；测试版本是0.1.5 app:description: 上传文件，基于文件内容，使用 Silico…...
软件第三方测试：关键部分、意义、流程及方法全解析？
软件第三方测试是保障软件质量的关键部分，它由专业的机构来开展，这个机构不隶属于开发方和使用方，能以客观公正的视角找出软件问题。 测试意义 软件第三方测试意义重大，它依靠专业技术，依照严格流程，对软…...
贪心算法解决会议安排问题
文章目录 前言 一、什么是贪心算法？ 贪心算法的基本概念：贪心算法并不从整体最优上加以考虑，所做的选择只是在某种意义上的局部最优选择。 二、会议安排题目 1.题目理解 2.思路剖析 总结 前言 本文将主要介绍贪心算法需要注意的地方以…...
高露洁牙膏是哪个国家的品牌？高露洁牙膏哪一款最好？
高露洁是来自于美国一个比较有知名度的品牌，在1806年的时候创立。总部是在美国纽约公园大道，在1873年时，高露洁就已经开始销售罐装牙膏。 在1896年时期推出可折叠管牙膏，在口腔护理产品发展的过程中拥有着不容忽视的地位。在1992…...
lin接口在线计算数据帧的校验位
在线校验计算链接：https://linchecksumcalculator.machsystems.cz/ 插入图片：...
Linux-07-Shell
一、Shell概述: Shell是一个命令行解释器，它接受应用程序/用户命令，然后调用操作系统内核 二、Shell中的变量: 1.系统预定义的变量: $HOME,$PWD,$SHELL,$USER等 2.用户自定义的变量: (1).基本语法: 定义变量:变量名变量值，注意前后不能…...
【云盘】使用阿里云盘托管项目大文件
【云盘】使用阿里云盘托管项目大文件 由于经常需要切换服务器运行项目实验，不同服务器在项目实验过程中会产生不同的数据、模型等较大文件，不能像代码那样能够使用git托管，因此考虑使用阿里云盘作为”第三方平台“托管这些大文件。 一、使用…...
《缓存策略：移动应用网络请求的“效能密钥” 》
用户体验无疑是重中之重，而网络请求性能，恰似一座桥梁，连接着用户与应用丰富的内容和功能。当网络不佳或者请求频繁时，缓慢的响应速度常常让用户兴致索然，甚至可能导致用户流失。此时，缓存策略就如同一位幕…...
深入解析C++11委托构造函数：消除冗余初始化的利器
一、传统构造函数的痛点 在C11之前，当多个构造函数需要执行相同的初始化逻辑时，开发者往往面临两难选择： class DataProcessor {std::string dataPath;bool verbose;int bufferSize; public:// 基础版本DataProcessor(const std::string&am…...
文章七《深度学习调优与超参数优化》
🚀 文章7：深度学习调优与超参数优化——你的AI模型需要一场"整容手术" 一、模型调优核心策略：像调整游戏装备一样优化模型 1. 学习率调整：掌控训练的"油门踏板" 比喻：把模型训练想象成赛车游戏&…...
变量与输入输出)
python入门(1)变量与输入输出
一、变量 使用规则 变量名值例子 a13变量名规则 变量名可以用大小写字母、数字、下划线。 数字、下划线不可开头 例子 name name1 1name name_first _first 二、输入输出 输出print print(*objects,sep"",end"\n") objects:多个要输出的值 sep:每个…...
藏文情感分析器入门学习实践
🎯 项目目标： 输入一段藏文短句。自动分析这句话的情感倾向：积极（正面）/消极（负面）/中立。 🔍 技术原理简介 情感分析是什么？ 情感分析（Sentiment Analysi…...
爱胜品ICSP YPS-1133DN Plus黑白激光打印机报“自动进纸盒进纸失败”处理方法之一
故障现象如下图提示： 用户的爱胜品ICSP YPS-1133DN Plus黑白激光打印机在工作过程中提示自动进纸盒进纸失败并且红色故障灯闪烁； 给出常见故障一般处理建议如下： 当您的爱胜品ICSP YPS-1133DN Plus 黑白激光打印机出现“自动进纸盒进纸失败”…...
数据库索引重建与优化操作在数据库性能维护与数据更新频繁场景下的应用
数据库索引重建与优化操作在数据库性能维护与数据更新频繁场景下的应用 数据库索引的作用与重要性 索引的定义与作用 数据库索引是一种特殊的数据结构，用于加快数据库表的数据检索速度。它类似于书籍的目录，能够快速定位到需要的数据页，而不必…...
前端应用开发技术历程的简要概览
前端应用开发技术详解 一、萌芽期（1990s - 2004） 技术特征 HTML 3.2 / HTML 4.01 是主流版本。 样式用 CSS1/CSS2，但大部分样式写在 <style> 标签甚至行内。 动态效果主要通过 JavaScript 控制 DOM，兼容性极差。 代表事…...
SPOJ 11576 TRIP2 - A Famous King’s Trip 【Tarjan+欧拉回路】
自我吐槽 （哭 题目传送门 SPOJ 洛谷 题目大意 让你在简单无向图上删去2条边，使该图联通并存在欧拉回路 输出字典序最小的一对边 思路 考虑到存在欧拉回路的充要条件，即 i n x ≡ 0 ( m o d 2 ) ∀ i ( 1 ≤ i ≤ n ) in_x\equiv 0 (\m…...
DeepSeek R1：强化学习范式的推理强化模型
定位与目标 DeepSeek R1 的推出并非 DeepSeek V3 的简单迭代，而是一次在训练范式上的大胆探索。与传统大模型主要依靠监督微调(SFT)后进行强化学习不同，R1 将重点放在推理能力和行为对齐上，尝试通过大规模强化学习直接激发模型的推理潜力。其目标是利用强化学习的反馈机制，…...
ubuntu22.04安装显卡驱动与cuda+cuDNN
背景： 紧接前文：Proxmox VE 8.4 显卡直通完整指南：NVIDIA 2080 Ti 实战。在R740服务器完成了proxmox的安装，并且安装了一张2080ti 魔改22g显存的的显卡。配置完了proxmox显卡直通，并将显卡挂载到了vm 301（…...
使用python爬取百度搜索中关于python相关的数据信息
Python爬取百度搜索"Python"相关数据信息 一、准备工作 在开始爬取之前，需要了解以下几点： 百度搜索有反爬机制，需要合理设置请求头百度搜索结果页面结构可能会变化需要遵守robots.txt协议（百度允许爬取搜索结果&…...
Bootstrap（自助法）：无需假设分布的统计推断工具
核心思想 Bootstrap 是一种重采样（Resampling）技术，通过在原始数据中有放回地重复抽样，生成大量新样本集，用于估计统计量（如均值、方差）的分布或模型性能的不确定性。 …...
lib和dll介绍和VS2019生成实例
目录 lib文件和dll文件的作用dll和lib的优缺点VS2019 编译YOLOv5的dll和lib lib文件和dll文件的作用 (1)lib是编译时需要的，dll是运行时需要的。 如果要完成源代码的编译，有lib就够了。 如果也使动态连接的程序运行起来，有dll就够了。 在开发…...
tinycudann安装过程加ubuntu18.04gcc版本的升级（成功版！！！！）
使用的是 Linux，安装以下软件包 sudo apt-get install build-essential git安装 CUDA 并将 CUDA 安装添加到您的 PATH。 例如，如果您有 CUDA 12.6.3，请将以下内容添加到您的/usr/local/~/.bashrcexport PATH"/usr/local/cuda-12.6.3/bi…...
数字智慧方案5869丨智慧健康医疗养老大数据整体规划方案（76页PPT）（文末有下载方式）
资料解读：智慧健康医疗养老大数据整体规划方案 详细资料请看本解读文章的最后内容。 随着科技的飞速发展，健康医疗领域正经历着一场深刻的变革。特别是在大数据和人工智能技术的推动下，智慧健康医疗养老的整体规划方案逐渐浮出水面。本文将…...
使用huggingface_hub需要注意的事项
在安装huggingface_hub的时候要注意如果你的python是放在c盘下时记得用管理员模式命令行来安装huggingface_hub，否则安装过程会报错，之后也不会有huggingface-cli命令。 如果安装时因为没有用管理员权限安装而报错了，可以先卸载huggingface-…...
Matplotlib核心课程-2
4.1 数据加载、储存 4.1.1 从数据文件读取数据 导入支持库： import numpy as np from pandas import Series,DataFrame import pandas as pd 从csv文件读取数据，一般方法： pd.read_csv(../data/ex1.csv,encodinggbk) 从csv文件读取数据&#…...
友元函数和友元类
友元 友元是 C 提供的一种 打破封装 的机制，允许 友元函数 或 友元类 访问某个类的 非公有成员（private/protected）。 友元函数 友元函数 可以 直接访问 类的所有 成员，它是 定义在类外部 的 普通函数 ，不属于任何类…...