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

深入了解 Pinia:Vue 的下一代状态管理工具 (上篇)

引言

在现代前端开发中,状态管理是构建复杂应用的关键。Vue 生态系统中,Vuex 一直是官方推荐的状态管理工具。然而,随着 Vue 3 的发布,一个新的状态管理工具——Pinia,逐渐崭露头角。Pinia 不仅继承了 Vuex 的优点,还提供了更简洁、更灵活的 API,成为 Vue 开发者的新宠。

本文将深入探讨 Pinia 的核心概念、使用方法以及它与 Vuex 的对比,帮助你全面了解 Pinia 并掌握其在实际项目中的应用。


什么是 Pinia?

Pinia 是一个轻量级、类型安全的状态管理库,专为 Vue 3 设计。它的名字来源于西班牙语中的“菠萝”(Piña),象征着其简洁、灵活的特性。Pinia 的核心目标是提供一个更简单、更直观的状态管理解决方案,同时保持与 Vue 3 的完美兼容。

Pinia 的主要特点

  1. 轻量级:Pinia 的核心代码非常精简,体积小巧,适合各种规模的项目。

  2. 类型安全:Pinia 完全基于 TypeScript 开发,提供了出色的类型支持。

  3. 模块化:Pinia 支持模块化设计,可以轻松地将状态逻辑拆分为多个独立的模块。

  4. Devtools 支持:Pinia 与 Vue Devtools 完美集成,方便开发者调试和监控状态变化。

  5. Composition API 优先:Pinia 的设计理念与 Vue 3 的 Composition API 高度契合,提供了更灵活的状态管理方式。


Pinia 的核心概念

1. Store

Store 是 Pinia 的核心概念,类似于 Vuex 中的 Store。每个 Store 都是一个独立的模块,包含状态、计算属性、动作和方法。

定义一个 Store
import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({count: 0,}),getters: {doubleCount: (state) => state.count * 2,},actions: {increment() {this.count++;},},
});
在组件中使用 Store
<template><div><p>Count: {{ count }}</p><p>Double Count: {{ doubleCount }}</p><button @click="increment">Increment</button></div>
</template><script setup>
import { useCounterStore } from './stores/counter';const counterStore = useCounterStore();
const { count, doubleCount } = storeToRefs(counterStore);
const { increment } = counterStore;
</script>

2. State

State 是 Store 中的数据源,类似于 Vuex 中的 state。Pinia 的 State 是响应式的,可以直接在组件中使用。

3. Getters

Getters 是 Store 中的计算属性,用于从 State 中派生出新的数据。Getters 是惰性求值的,只有当依赖的 State 发生变化时才会重新计算。

4. Actions

Actions 是 Store 中的方法,用于处理业务逻辑和异步操作。Actions 可以直接修改 State,也可以通过 this 访问其他 Actions 和 Getters。


Pinia 与 Vuex 的对比

1. API 设计

  • Vuex:Vuex 的 API 设计较为复杂,包含 stategettersmutationsactions 等多个概念。

  • Pinia:Pinia 的 API 设计更加简洁,只有 stategetters 和 actions,去掉了 mutations,减少了学习成本。

2. 类型支持

  • Vuex:Vuex 的类型支持较弱,尤其是在 Vue 2 中。

  • Pinia:Pinia 完全基于 TypeScript 开发,提供了出色的类型支持。

3. 模块化

  • Vuex:Vuex 支持模块化,但配置较为繁琐。

  • Pinia:Pinia 的模块化设计更加灵活,每个 Store 都是一个独立的模块,可以轻松组合和复用。

4. 性能

  • Vuex:Vuex 的性能表现良好,但在大型项目中可能会遇到性能瓶颈。

  • Pinia:Pinia 的性能更优,尤其是在大型项目中,其轻量级设计能够显著提升性能。


Pinia 的最佳实践

1. 模块化设计

将状态逻辑拆分为多个独立的 Store,每个 Store 只负责一个特定的功能模块。例如:

// stores/counter.js
export const useCounterStore = defineStore('counter', {state: () => ({count: 0,}),actions: {increment() {this.count++;},},
});// stores/user.js
export const useUserStore = defineStore('user', {state: () => ({name: 'John Doe',}),actions: {updateName(newName) {this.name = newName;},},
});

2. 使用 TypeScript

充分利用 Pinia 的类型支持,为 Store 定义明确的类型:

interface CounterState {count: number;
}export const useCounterStore = defineStore('counter', {state: (): CounterState => ({count: 0,}),getters: {doubleCount: (state) => state.count * 2,},actions: {increment() {this.count++;},},
});

3. 与 Composition API 结合

Pinia 与 Vue 3 的 Composition API 高度契合,可以结合使用以提升代码的可读性和可维护性:

<script setup>
import { useCounterStore } from './stores/counter';const counterStore = useCounterStore();
const { count, doubleCount } = storeToRefs(counterStore);
const { increment } = counterStore;
</script>

结语

Pinia 作为 Vue 3 的下一代状态管理工具,凭借其简洁的 API、强大的类型支持和灵活的模块化设计,正在逐渐取代 Vuex 成为开发者的首选。如果你正在使用 Vue 3,Pinia 无疑是一个值得尝试的状态管理解决方案。

希望通过本文的介绍,你能对 Pinia 有一个全面的了解,并在实际项目中灵活运用。如果你有任何问题或想法,欢迎在评论区留言讨论!


推荐阅读

  • Pinia 官方文档

  • Vue 3 Composition API 指南

  • Vuex 与 Pinia 的对比分析

关注我,获取更多前端技术干货!

相关文章:

深入了解 Pinia:Vue 的下一代状态管理工具 (上篇)

引言 在现代前端开发中&#xff0c;状态管理是构建复杂应用的关键。Vue 生态系统中&#xff0c;Vuex 一直是官方推荐的状态管理工具。然而&#xff0c;随着 Vue 3 的发布&#xff0c;一个新的状态管理工具——Pinia&#xff0c;逐渐崭露头角。Pinia 不仅继承了 Vuex 的优点&am…...

Unity 中导入的VRM模型渲染为VRoid风格

按照前篇Unity VRoidBlenderUnity 3D人物模型导入使用-CSDN博客 导入到Unity之后,可以按需调整模型在场景中的渲染表现, 但是按照教程中完成的情况, 整个模型没有进行材质区分, 仅用一个材质表现整个模型, 导致不能给不同部位进行渲染调整. 这里我希望能够在Unity中获得跟VRoi…...

【ELK】【Elasticsearch 】DSL 和 DQL

1. DSL 查询&#xff08;Query DSL&#xff09; 全称&#xff1a;Domain Specific Language&#xff08;领域特定语言&#xff09;。 定义&#xff1a;Elasticsearch 提供的一种基于 JSON 的查询语言&#xff0c;用于构建复杂的查询逻辑。 特点&#xff1a; 支持多种查询类型…...

最新版本Exoplayer扩展FFmpeg音频软解码保姆级教程

ExoPlayer 是一个开源的 Android 媒体播放库&#xff0c;由 Google 开发和维护&#xff0c;用于替代 Android 系统自带的 MediaPlayer。它提供了更强大的功能、更好的性能和更高的灵活性&#xff0c;适用于各种复杂的媒体播放场景。所以被广泛用于各种播放器场景。 最近项目中…...

面对低消费欲人群,我们如何开发其需求?

在市场增量放缓的当下&#xff0c;开发深度开发各层次的人群已经成为现实需求。低消费欲人群并非“没有需求”&#xff0c;而是更谨慎、更理性。他们可能对价格敏感&#xff0c;但对实用性、情感共鸣和生活品质的追求依然存在。就让我们从以下四个角度&#xff0c;拆解如何激发…...

《算法基础入门:最常用的算法详解与应用(持续更新实战与面试题)》

1. 排序算法 排序算法是将一组数据按特定的顺序排列起来的算法&#xff0c;常见的有&#xff1a; 冒泡排序&#xff08;Bubble Sort&#xff09;选择排序&#xff08;Selection Sort&#xff09;插入排序&#xff08;Insertion Sort&#xff09;归并排序&#xff08;Merge So…...

Linux设备驱动-练习

练习要求&#xff1a; 一、设备树 1、配置设备树信息&#xff1a;将3个led灯和1个风扇使用到的设备信息配置到设备树中 二、设备驱动层 1、通过of_find_node_by_name、of_get_named_gpion等内核核心层统一的api接口调用外设&#xff1b; 2、通过udev设备管理器自动注册并创建设…...

蓝桥杯核心内容

核心内容 数学 质数与筛质数&#xff0c;分解质因数 分解质因数 所有的数都可以写成有限个数相乘质数&#xff1a;可以写成1✖本身&#xff08;如131✖13&#xff09;合数&#xff1a;ab1✖...✖bn-》把乘数里面是合数的再分&#xff08;如b3是合数-》b3c1✖c2&#xff09;进…...

Spring Boot拦截器(Interceptor)详解

拦截器Interceptor 拦截器我们主要分为三个方面进行讲解&#xff1a; 介绍下什么是拦截器&#xff0c;并通过快速入门程序上手拦截器拦截器的使用细节通过拦截器Interceptor完成登录校验功能 1. 快速入门 什么是拦截器&#xff1f; 是一种动态拦截方法调用的机制&#xff…...

非常好用的ssh工具Xterminal

免安装 Xterminal - 更好用的开发工具&#xff0c;但不止于(SSH/控制台/More)...

【Python项目】基于Django的医疗领域用户问答意图识别系统

【Python项目】基于Django的医疗领域用户问答意图识别系统 技术简介&#xff1a;采用Python技术、MySQL数据库、Neo4j图形数据库、Django框架、BERTLSTMCRF模型等技术实现。 系统简介&#xff1a; 医疗领域用户问答意图识别系统是一个基于知识图谱的智能问答平台&#xff0c;旨…...

深入理解指针(六)

一、字符指针变量 1.1字符指针变量 在指针的类型中我们知道有一种指针类型为字符指针char* 一般有以下两种使用方式&#xff1a; #include<stdio.h> int main() { char ch w; char* pc &ch; *pc w; return 0; } #include<stdio.h> int main()…...

Linux下基本指令(4)

Linux权限的概念 Linux下有两种用户&#xff1a;超级用户&#xff08;root&#xff09;、普通用户。 超级用户&#xff1a;可以再linux系统下做任何事情&#xff0c;不受限制 普通用户&#xff1a;在linux下做有限的事情。 超级用户的命令提示符是“#”&#xff0c;普通用户…...

vue 手写分页

【先看效果】 &#xff08;1&#xff09;内容小于2页 不展示页码 &#xff08;2&#xff09;1 < 内容页数< 限定展示页码 展示&#xff1a;页码、上下页&#xff1b;隐藏&#xff1a;首页、末页图标&#xff0c;上、下一区间码。即&#xff1a;&#xff08;页数&#…...

Spring Boot项目接收前端参数的11种方式

大家好&#xff0c;我是。在前后端项目交互中&#xff0c;前端传递的数据可以通过HTTP请求发送到后端&#xff0c; 后端在Spring Boot中如何接收各种复杂的前端数据呢&#xff1f;这篇文章总结了11种在Spring Boot中接收前端数据的方式。 1 搭建项目 1.通过Spring Initializr…...

Springboot项目:使用MockMvc测试get和post接口(含单个和多个请求参数场景)

一、引入MockMvc依赖 使用MockMvc&#xff0c;必须要引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency>二、具体演示…...

OpenAI ChatGPT在心理治疗领域展现超凡同理心,通过图灵测试挑战人类专家

近期&#xff0c;一项关于OpenAI ChatGPT在心理治疗领域的研究更是引起了广泛关注。据报道&#xff0c;ChatGPT已经成功通过了治疗师领域的图灵测试&#xff0c;其表现甚至在某些方面超越了人类治疗师&#xff0c;尤其是在展现同理心方面&#xff0c;这一发现无疑为AI在心理健康…...

【HBase】HBaseJMX 接口监控信息实现钉钉告警

目录 一、JMX 简介 二、JMX监控信息钉钉告警实现 一、JMX 简介 官网&#xff1a;Apache HBase ™ Reference Guide JMX &#xff08;Java管理扩展&#xff09;提供了内置的工具&#xff0c;使您能够监视和管理Java VM。要启用远程系统的监视和管理&#xff0c;需要在启动Java…...

25旅游管理研究生复试面试问题汇总 旅游管理专业知识问题很全! 旅游管理复试全流程攻略 旅游管理考研复试真题汇总

旅游管理复试很难&#xff1f;&#xff01; 别怕&#xff01;经验超丰富的老学姐来给你们出谋划策啦&#xff01; 最近是不是被旅游管理考研复试折磨得够呛&#xff1f;莫慌&#xff01;我这有着丰富复试指导经验的老学姐来帮你们排雷&#xff0c;助力大家顺利上岸&#xff01…...

深入解析C++26 Execution Domain:设计原理与实战应用

一、Domain设计目标与核心价值 Domain是C26执行模型的策略载体&#xff0c;其核心解决两个问题&#xff1a; 执行策略泛化&#xff1a;将线程池、CUDA流等异构调度逻辑抽象为统一接口策略组合安全&#xff1a;通过类型隔离避免不同执行域的策略污染 // Domain类型定义示例&a…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

【JVM】Java虚拟机(二)——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

stm32wle5 lpuart DMA数据不接收

配置波特率9600时&#xff0c;需要使用外部低速晶振...