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

状态管理组件Pinia 简介与底层原理、Pinia 与其他状态管理库对比、Vue3 + Element Plus + Pinia 安装配置详解

news 来源：原创 2025/9/18 16:57:10

一、Pinia 简介与底层原理

1. Pinia 简介

Pinia 是 Vue3 官方推荐的状态管理库，由 Vue 核心团队开发，旨在替代 Vue2 的 Vuex。其核心目标是提供一种更简洁、直观的状态管理方案，同时充分利用 Vue3 的响应式系统和 Composition API。

2. 底层原理

响应式数据：Pinia 通过 Vue3 的 reactive 和 ref 实现 Store 的响应式状态管理。
Store 构建：每个 Store 是一个通过 defineStore 创建的对象，包含 state、getters 和 actions。
模块化设计：Store 以独立模块形式存在，支持按需引入，避免全局污染。
TypeScript 支持：通过 TypeScript 推导类型，无需额外类型定义。

二、Pinia 与其他状态管理库对比

库	核心概念	适用框架	API 风格	TypeScript 支持	学习成本
Pinia	Store、State、Getter、Action	Vue3	简洁（Composition API）	内置类型推导	低
Vuex	State、Getter、Mutation、Action	Vue2	Options API	需手动配置	中
Redux	Store、Action、Reducer、Middleware	跨框架	单向数据流	需配合 Toolkit	高
MobX	Observable、Reaction、Compute	跨框架	响应式编程	需手动定义类型	中

三、Vue3 + Element Plus + Pinia 安装配置详解

1. 安装依赖

npm install vue@next vue-router@4 element-plus pinia

2. 配置 Pinia

步骤 1：注册 Pinia 实例

// main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';const app = createApp(App);
const pinia = createPinia();app.use(ElementPlus) // 注册 Element Plus.use(router)      // 注册路由.use(pinia)       // 注册 Pinia.mount('#app');

步骤 2：定义 Store（以用户信息为例）

// stores/userStore.js
import { defineStore } from 'pinia';export const useUserStore = defineStore('user', {state: () => ({name: '张三',age: 25,address: '北京市'}),getters: {fullName(state) {return `${state.name}-${state.age}`;}},actions: {updateUserInfo(newName, newAge) {this.name = newName;this.age = newAge;}}
});

步骤 3：在组件中使用 Store

<!-- src/components/UserProfile.vue -->
<template><el-card shadow="hover"><h2>用户信息</h2><el-form label-width="120px"><el-form-item label="姓名"><el-input v-model="user.name" placeholder="请输入姓名" /></el-form-item><el-form-item label="年龄"><el-input-number v-model="user.age" :min="1" :max="100" /></el-form-item><el-button type="primary" @click="updateUser">更新信息</el-button></el-form><div>完整信息：{{ user.fullName }}</div></el-card>
</template><script setup>
import { useUserStore } from '@/stores/userStore';const user = useUserStore();const updateUser = () => {user.updateUserInfo('李四', 30);
};
</script>

四、完整代码结构示例

src/
├── assets/
├── components/
│   └── UserProfile.vue
├── router/
│   └── index.js
├── stores/
│   └── userStore.js
├── views/
│   └── Home.vue
├── App.vue
└── main.js

五、关键配置总结

功能	实现方式	代码示例
定义 Store	使用 `defineStore` 创建，包含 `state`、`getters`、`actions`	`export const useUserStore = defineStore('user', { ... });`
获取 Store 实例	在组件中通过 `useUserStore()` 调用	`const user = useUserStore();`
绑定表单数据	直接使用 `v-model` 绑定 Store 的 `state`	`<el-input v-model="user.name" />`
调用 Actions	通过 Store 实例直接调用方法	`user.updateUserInfo('李四', 30);`

六、扩展场景示例

1. 结合路由参数

// router/index.js
const routes = [{path: '/user/:id',component: UserProfile,props: (route) => ({ userId: route.params.id })}
];

<!-- UserProfile.vue -->
<script setup>
import { useRoute } from 'vue-router';
import { useUserStore } from '@/stores/userStore';const route = useRoute();
const user = useUserStore();// 根据路由参数初始化数据
user.userId = route.params.id;
</script>

2. 持久化存储

// main.js
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';const pinia = createPinia();
pinia.use(piniaPluginPersistedstate); // 添加插件// 在 Store 中配置
export const useUserStore = defineStore('user', {state: () => ({ ... }),persist: true // 启用持久化
});

七、选择 Pinia 的理由

Vue3 原生集成：与 Vue3 的响应式系统深度耦合，支持 Composition API。
简洁高效：无冗余的 mutation 和 action 分离，代码更简洁。
TypeScript 支持：无需额外配置即可获得类型安全。
模块化设计：Store 独立且可复用，适合复杂项目。

通过以上步骤，即可实现 Vue3 + Element Plus + Pinia 的完整开发流程。如需进一步优化（如模块化 Store、复杂状态逻辑），可结合具体需求调整配置。

状态管理组件Pinia 简介与底层原理、Pinia 与其他状态管理库对比、Vue3 + Element Plus + Pinia 安装配置详解

一、Pinia 简介与底层原理 1. Pinia 简介 Pinia 是 Vue3 官方推荐的状态管理库，由 Vue 核心团队开发，旨在替代 Vue2 的 Vuex。其核心目标是提供一种更简洁、直观的状态管理方案，同时充分利用 Vue3 的响应式系统和 Composition API。 2. 底…...

编程日记 2025/9/18 16:57:10

本地部署 opik

本地部署 opik 1. 安装2. 访问 1. 安装克隆代码， git clone https://github.com/comet-ml/opik.git使用 Docker compose 启动， cd opik/deployment/docker-compose docker compose up -d2. 访问启动后，您可以在浏览器中访问 localhost:…...

编程日记 2025/9/18 16:52:12

操作系统之进程与线程的理解（一）

对进程的理解进程是可以并发执行的程序在某个数据集合上的运行过程，是系统进行资源分配和调度的基本单位。进程由三部分组成，程序，数据和进程控制块（简称PCB）。简单的说，进程就是程序的一次执行为确保进…...

编程日记 2025/9/18 16:56:09

JS 箭头函数

只能用于声明函数表达式更简洁。替代匿名函数设置取消点击事件的默认行为在这里插入图片描述...

编程日记 2025/9/18 16:55:03

Mb,Kb,byte,bits

1MB1024KB; 1KB1024byte(字节）； 1byte8bits（位）； 小蓝准备用 256MB 的内存空间开一个数组，数组的每个元素都是 32 位二进制整数，如果不考虑程序占用的空间和维护内存需要的辅助空间&#xf…...

编程日记 2025/9/18 16:56:10

x265 中 aqMode 和 hevcAq 的深度解析与应用技巧

aqMode 和 hevcAq 介绍在 x265 中基本继承了 x264 中 aqmode 的思想，此外还引入了 hevcAq 算法工具，在 x265_param 结构体中有这两个参数变量开关相关解释。从声明注释可以理解，aqMode 和 x264 中 aqmode 的思想完全相似，也扩展了些功能，属于通用型自适应量化方法，基于 …...

编程日记 2025/9/18 16:54:00

（一）基于云平台微调大模型，以deepseek-coder-6.7b为例

一、租借rtx4090卡并创建示例如下图，我们进入jupyter界面，然后创建笔记本二、提前下载好模型到本地为了节省时间，我们需要提前下好模型deepseek-ai/deepseek-coder-6.7b-instruct，然后再上传到autodl上直接本地加载。下载方…...

编程日记 2025/9/14 15:02:09

【Docker基础】全面解析 Docker 镜像：构建、使用与管理

文章目录一、Docker 镜像（Docker Image）详解1.1 Docker 镜像的结构1.2 Docker 镜像的每一层（Layer）1.3 镜像的构建过程1.4 镜像的使用1.5 镜像的优势二、为什么需要镜像三、镜像命令3.1 命令清单3.2 详细解释四、docker 操作案…...

编程日记 2025/9/13 15:17:58

3. git config

文章目录基本概述配置级别基本用法设置配置项查看配置项删除配置项常用配置项基本概述 git config 的作用是：设置用户信息、编辑器、别名、仓库行为等。配置级别级别作用范围配置文件路径命令选项仓库级别（Local）当前仓库.git/config…...

编程日记 2025/9/14 15:14:08

docker 运行自定义化的服务-前端

运行自定义化的前端服务具体如下： ①打包前端项目，形成dist包 ②编写dockerfile文件，文件内容如下： # 基础镜像(镜像名:版本号TAG) FROM nginx:1.0 # 镜像作者和相关元数据 LABEL maintainer"Atb" \version"1.0…...

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

error: RPC failed； HTTP 408 curl 22 The requested URL returned error: 408

在git push时报错：error: RPC failed; HTTP 408 curl 22 The requested URL returned error: 408 原因：可能是推送的文件太大，要么是缓存不够，要么是网络不行。解决方法： 将本地 http.postBuffer 数值调整到500MB&…...

编程日记 2025/8/24 23:58:47

JMH 基准测试实战：Java 性能对比的正确打开方式！

📖 摘要在Java开发中，我们经常需要比较不同实现方式的性能差异。但如何科学、准确地进行性能测试呢？本文将带你深入理解JMH（Java Microbenchmark Harness）工具，通过实战演示如何正确编写和运行基准测试&a…...

编程日记 2025/9/9 1:33:18

etf可以T+0交易吗？

在我国的A股市场中，部分ETF基金支持T0交易，这为投资者提供了更灵活的交易策略。支持T0交易的ETF基金类型包括： 货币型ETF：主要投资于货币市场工具，如短期债券和银行存款，具有较高的流动性。债券型ETF&…...

编程日记 2025/9/12 18:53:26

解决问题：Vscode 自动更新不匹配远程服务器版本

避免自动更新： 1. 打开：文件 - 首选项 - 设置 - 应用程序 - 更新； 2. 设置下列选项： 如果已自动更新，如何回退至原有的历史版本 ： 去官网下载所需的历史版本，然后直接按流程安装，…...

编程日记 2025/9/11 1:15:50

【Leetcode-Hot100】盛最多水的容器

题目解答目的是求面积最大，面积是由两个下标和对应的最小值得到，因此唯一的问题就是如何遍历这两个下标。我采用begin和end两个变量，确保begin是小于end的，使用它们二者求面积，代码如下： 很不幸出错了…...

编程日记 2025/8/29 19:11:23

FFMEPG常见命令查询

基本参数表格1：主要参数参数说明-i设定输入流-f设定输出格式(format) 高于后缀名-ss开始时间-t时间长度codec编解码表格2：音频参数参数说明-aframes设置要输出的音频帧数-f音频帧深度-b:a音频码率-ar设定采样率-ac设定声音的Channel数-acodec设定…...

编程日记 2025/9/17 23:57:24

欢迎来到 Codigger Store：Boby周边专区

亲爱的 Codigger 用户们，感谢你们一直以来的支持与热爱！你们的每一次代码跳跃、每一次项目成功，都离不开你们对编程的热情和对 Codigger 的信任。为了回馈大家的厚爱，我们在 Codigger Store 中特别开设了 Boby 周边专区&#xff0…...

编程日记 2025/9/16 9:25:19

决策树模型

决策树(TDS) 注意1：决策树有很多种算法，比如：ID3算法，C4.5算法，CART算法，这三个算法的区别是选择最优划分属性的方法不同，第一个是根据信息增益来选；第二个是找出信息增益高于平均水…...

编程日记 2025/9/16 3:43:47

解锁深度学习激活函数

在深度学习的广袤天地里，激活函数宛如隐匿于神经网络架构中的神奇密码，掌控着模型学习与表达的关键力量。今天，就让我们一同深入探究这些激活函数的奇妙世界，揭开它们神秘的面纱。一、激活函数为何不可或缺？ 想象一…...

编程日记 2025/9/13 0:27:09

Kubernetes 深入浅出系列 | 容器剖析之容器安全

目录 1、容器真的需要privileged权限吗?一、什么是 --privileged 权限？二、privileged 的风险到底有多大？三、常见需求场景及更安全的替代方式四、如何判断容器是否真正需要特权？ 2、不以 Root 用户运行容器，真的更安全吗&#x…...

编程日记 2025/9/13 0:27:12

Spring Boot应用中可能出现的Full GC问题

Full GC的原理与触发条件原理标记-清除：首先遍历所有对象，标记可达的对象，然后清除不可达的对象。复制算法：将内存分为两部分，每次只使用其中一部分。当这部分内存用完时，将存活的对象复制到另一部分&a…...

编程日记 2025/9/11 15:35:19

Maven 的安装与配置（IDEA）

2025/4/9 向一、什么是Maven Maven 是一个基于项目对象模型（Project Object Model，POM）概念的项目构建工具（所以就是一个工具），它主要用于自动化项目的构建过程，包括编译、测试、打包、部署等…...

编程日记 2025/9/10 19:43:33

软考中级-软件设计师 2022年下半年上午题真题解析：通关秘籍+避坑指南

📚 目录（快速跳转） 选择题（上午题）（每题1分，共75分）一、计算机系统基础知识 🖥️💻 题目1：计算机硬件基础知识 - RISC（精简指令集计算…...

编程日记 2025/9/15 0:48:15

全栈开发套件Telerik DevCraft——赋能现代化应用构建

Telerik DevCraft包含一个完整的产品栈来构建您下一个Web、移动和桌面应用程序。它使用HTML和每个.NET平台的UI库，加快开发速度。Telerik DevCraft提供完整的工具箱，用于构建现代和面向未来的业务应用程序，目前提供UI for ASP.NET MVC、Kendo…...

编程日记 2025/9/18 16:20:56

Windows + vmware + ubuntu+docker + docker-android实现Android模拟器构建和启动

文章目录引言编译启动过程玩下adb最后引言 Windows vmware ubuntudockerdocker-android实现Android模拟器启动编译启动过程 #下载docker-android git clone https://github.com/budtmo/docker-android.gitmaqiubuntu:~/docker-android$ git remote -v origin https://…...

编程日记 2025/9/16 0:32:53

远程团队协作效率低，如何优化

在远程工作的环境中，团队协作效率低下成为许多企业面临的一大挑战。随着全球化和技术进步，远程团队的出现成为企业的常态，但由于沟通不畅、任务管理不明确、缺乏团队凝聚力等问题，往往会影响团队的整体效率。为了优化远程团队的协…...

编程日记 2025/9/13 3:45:32

Oracle 19C 通过 ODBC 连接 SQL Server 数据库指南 (Red Hat 7)

前言本指南详细说明如何在 Red Hat Enterprise Linux 7 系统上配置 Oracle 19C 通过 ODBC 连接 SQL Server 数据库。这种异构数据库连接方式称为 Oracle Heterogeneous Services，允许 Oracle 数据库直接访问非 Oracle 数据源。系统要求操作系统：Red Hat Enterprise Linu…...

编程日记 2025/9/11 19:53:12

【MYSQL从入门到精通】数据类型及建表

一些基础操作语句 1.使用客户端工具连接数据库服务器：mysql -uroot -p 2.查看所有数据库：show databases; 3.创建属于自己的数据库： create database 数据库名;create database if not exists 数据库名; 强烈建议大家在建立数据库时指定编…...

编程日记 2025/9/13 16:41:37

鸿蒙开发中的并发与多线程

文章目录前言异步并发 (Promise和async/await)多线程并发并发能力选择耗时任务并发执行场景常见业务场景常驻任务并发执行场景常见业务场景传统共享内存并发业务长时任务并发执行场景常见业务场景并发任务管理线程间通信同语言线程间通信（ArkTS内）线…...

编程日记 2025/9/18 14:47:55

ruby self

在 Ruby 中，self 是一个指向当前对象的特殊变量，它的值根据代码的上下文动态变化。理解 self 的指向是掌握 Ruby 面向对象编程的关键。以下是详细解析： 一、self 的核心规则 self 始终指向当前方法的执行者（即调用方法的对象&…...

编程日记 2025/9/12 22:01:54

Kotlin 学习-集合

/*** kotlin 集合* List:是一个有序列表，可通过索引（下标）访问元素。元素可以在list中出现多次、元素可重复* Set:是元素唯一的集合。一般来说 set中的元素顺序并不重要、无序集合* Map:（字典）是一组键值对。键是唯一的…...

编程日记 2025/9/16 1:58:42

封装方法的辨析

equals //字符串 str1.equals(str2); //list的两个实现类 list1.equals(list2); //map的两个实现类 //比较所有的键值对是否相同 map1.equals(map2); //数组（包括string类型） //比较内容是否相同 Arrays.equals(array1, array2); contains 基本都有…...

编程日记 2025/9/13 11:17:08

解决 IntelliJ IDEA 中 Maven 项目左侧项目视图未显示顶层目录问题的详细步骤说明

以下是解决 IntelliJ IDEA 中 Maven 项目左侧项目视图未显示顶层目录问题的详细步骤说明： 1. 切换项目视图模式默认情况下，IDEA 的项目视图可能处于 Packages 模式，仅显示代码包结构，而非物理目录。操作步骤： 点击…...

编程日记 2025/9/18 12:22:01

CMIP6数据分析与可视化、降尺度技术与气候变化的区域影响、极端气候分析

当前的CMIP6计划相较于前代模型，在空间分辨率、物理过程表达和地球系统组件耦合等方面均有显著提升。一：气候变化研究的AI新视角 1、气候模型基础与全球气候模型（GCM） 全球气候（环流）模型的基本原理、发…...

编程日记 2025/9/13 15:28:07

如何精准控制大模型的推理深度

论文标题 ThinkEdit: Interpretable Weight Editing to Mitigate Overly Short Thinking in Reasoning Models 论文地址 https://arxiv.org/pdf/2503.22048 代码地址 https://github.com/Trustworthy-ML-Lab/ThinkEdit 作者背景加州大学圣迭戈分校动机链式推理能显…...

编程日记 2025/9/9 18:22:27

1. Git 下载和安装

文章目录 Git 下载Git 安装（以windows为例）Git 使用（以windows为例） Git 下载 1.进 Git 官网 https://git-scm.com/downloads 2.选择对应的操作系统 3.选择对应的操作系统位数 Git 安装（以windows为例）…...

编程日记 2025/9/11 3:38:51

git回滚指定版本并操作

你可以通过以下步骤切换到第三个版本。根据你的需求，有两种主要方法： 方法 1：临时查看第三个版本（不修改当前分支） 适用于仅查看或测试旧版本，不保留后续修改： 找到第三个版本的提交哈希&#…...

编程日记 2025/9/15 16:19:46

FastAdmin和thinkPHP学习文档

介绍 - FastAdmin框架文档 - FastAdmin开发文档https://doc.fastadmin.net/doc目录结构 ThinkPHP5.0完全开发手册看云ThinkPHP V5.0是一个为API开发而设计的高性能框架——是一个颠覆和重构版本，采用全新的架构思想，引入了很多的PHP新特性&#xff0c…...

编程日记 2025/9/17 18:59:04

通过HTTP协议实现Git免密操作的解决方案

工作中会遇到这样的问题的。通过HTTP协议实现Git免密操作的解决方案方法一：启用全局凭据存储（推荐） 配置凭证存储‌ 执行以下命令，让Git永久保存账号密码（首次操作后生效）： git config --g…...

编程日记 2025/9/14 14:27:18

git 查看某一文件夹下所有文件修改记录

git: 如何查询某个文件或者某个目录的更新历史_git 查看指定文件夹的记录-CSDN博客 git log --follow path/to/your/file git log -p --follow path/to/your/file git log --stat --follow path/to/your/file这是最常用的方法，可以显示指定文件的所有提交历史…...

编程日记 2025/9/10 18:17:32

测试（一）

软件的生命周期： 需求分析——计划——设计——编码——测试——运行维护常见的开发模型： 瀑布模型： 最基本的开发模型，绝大多数开发模型的基本框架。特点：线性的开发流程使用场景：需求固定&#xff…...

编程日记 2025/9/15 0:28:30

解决华硕主板Z890m下载ubuntu20.04后没有以太网问题

问题描述： 华硕主板Z890m下载双系统ubuntu20.04后，发现ubuntu不能打开以太网。问题原因： 华硕主板的网卡驱动是r8125,而ubuntu20.04的驱动版本是r8169，所以是网卡驱动不匹配造成解决方案开机界面按下F2进入BOIS模式&#…...

编程日记 2025/9/13 8:36:34

从零推导飞机小扰动运动线性方程——0. 学习目录

第0期文章——学习目录如图，本专栏将连载以下学习内容，带你从零开始学习飞机小扰动方程！...

编程日记 2025/8/24 15:38:55

Agentic AI 干货！DeepSeek + OpenAI SDK 构建 Agent 实战

引言： DeepSeek-R1、OpenAI-o1 等具备内化的假设、反思、验证等优秀推理能力的 LLM 大型推理模型将 AI 发展推进到智能体 AI 时代，将使 AI Agent 迸发出远超上一代由外化的手搓式简单推理 Agent 不可比拟的发展势能。在 GTC2025 大会上，英伟…...

编程日记 2025/9/15 0:28:31

【语法】C++的list

目录为什么会有list？ 迭代器失效： list和vector的迭代器不同的地方： list的大部分用法和vector都很像，例如push_back，构造，析构，赋值重载这些就不再废话了，本篇主要讲的是和vecto…...

编程日记 2025/9/2 11:38:38

Java接口性能优化面试问题集锦：高频考点与深度解析

1. 如何定位接口性能瓶颈？常用哪些工具？ 考察点：性能分析工具的使用与问题定位能力。核心答案： 工具：Arthas（在线诊断）、JProfiler（内存与CPU分析）、VisualVM、Prometh…...

编程日记 2025/9/16 4:55:35

基于STM32与应变片的协作机械臂力反馈控制系统设计与实现---5.2 工业机械臂系统性能测试全方案（专业工程级）

5.2 工业机械臂系统性能测试全方案（专业工程级）一、测试体系架构设计 1.1 三级测试体系 #mermaid-svg-A55VxjZ7ENKNWAli {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-A55VxjZ7ENKNWAli .error-icon{fill:#55…...

编程日记 2025/8/24 12:27:34

VM——相机拍照失败

1、问题：相机频闪触发，在MVS中正常出图，在VM中出现拍照失败 2、解决： 1、首先排查网络设置（巨帧是否设置） 2、电脑的所有防火墙是否关闭 3、在MVS中恢复相机的设置参数为默认参数，删除VM中的全…...

编程日记 2025/9/16 1:10:53

图解力扣回溯及剪枝问题的模板应用

文章目录选哪个的问题17. 电话号码的字母组合题目描述解题代码图解复杂度选不选的问题78. 子集题目描述解题代码图解复杂度两相转化77. 组合题目描述解题代码法一：按选哪个的思路法二：按选不选的思路图解选哪个：选不选复杂度选哪个的问…...

编程日记 2025/9/16 1:31:58

Trae + LangGPT 生成结构化 Prompt

Trae LangGPT 生成结构化 Prompt 0. 引言1. 安装 Trae2. 克隆 LangGPT3. Trae 和 LangGPT 联动4. 集成到 Dify 中 0. 引言 Github 上 LangGPT 这个项目，主要向我们介绍了写结构化Prompt的一些方法和示例，我们怎么直接使用这个项目，辅助我们…...

编程日记 2025/9/10 4:20:18