Vue3之Pinia

在前端开发中,随着应用程序的规模和复杂性增加,状态管理成为了不可或缺的一部分。Pinia作为Vue 3的专属状态管理库,以其轻量级、易用性和灵活性,逐渐成为了Vue开发者的新宠。本文将详细介绍Pinia的基本概念、功能特点、应用场景、优缺点,并提供相关的代码示例,帮助你更好地理解和使用Pinia。

一、Pinia的基本概念

Pinia是Vue的状态管理库,它允许你跨组件或页面共享状态。状态管理库Store是一个保存状态、业务逻辑的实体,每个组件都可以读取、写入它。Pinia的核心概念包括state、getters和actions:

- State

各个组件需要共享的状态,相当于组件中的data。

- Getters

状态代理,用于在获取状态时对状态进行变更,相当于组件中的computed。

- Actions

对状态的一系列操作,可以执行同步或异步操作,相当于组件中的methods。

二、Pinia的功能特点

1. 轻量级与模块化

Pinia比Vuex更轻量级,不需要使用Vuex的一些复杂概念,如模块和getter。同时,Pinia支持模块化管理,可以将状态分成多个store,提高代码的可维护性和可扩展性。

2. 简单易用

Pinia的API设计简洁明了,只保留了state、getters和actions,使得代码编写更加容易和直观。

3. TypeScript支持

Pinia从设计之初就原生支持TypeScript,提供了更好的类型推导和类型检查的支持,使得在编写类型安全的代码时更加容易。

4. 插件系统

Pinia提供了一个插件系统,允许开发者通过插件来扩展其功能或改变其行为,例如添加中间件、持久化存储、调试工具等。

5. 与Vue 3的整合

Pinia能够与Vue 3的组合式API无缝集成,使得状态管理代码更加清晰和模块化。

6. 热更新支持

Pinia支持热更新(HMR),使得在开发环境下对状态管理代码的修改可以直接生效,无需刷新页面。

7. 支持Vue DevTools

Pinia支持Vue DevTools,允许开发者在浏览器中直接查看和调试Vue应用程序的状态。

三、Pinia的应用场景

Pinia的应用场景主要集中在Vue.js应用程序中,特别是那些需要有效管理复杂状态的大型或中型应用程序。以下是Pinia的几个典型应用场景:

1. 跨组件状态共享

在Vue应用程序中,经常需要在多个组件之间共享状态。Pinia提供了一个集中的位置来存储和管理这些状态,使得跨组件的状态共享变得简单直接。

2. 状态集中管理

Pinia允许开发者将应用程序的状态存储在一个集中的位置,并通过Vue组件进行访问和修改。这种集中管理的方式有助于减少组件之间的直接依赖,提高代码的可维护性和可扩展性。

3. 模块化状态管理

Pinia支持将状态划分为不同的模块(store),每个模块对应一个特定的功能或数据领域。这种模块化的设计方式使得状态管理更加清晰和有序,同时也便于代码的复用和维护。

4. 异步操作处理

Pinia支持在actions中执行异步操作,如发送网络请求、处理副作用等。这使得Pinia能够处理更复杂的逻辑,如用户登录、数据加载等场景。

四、Pinia的优缺点

1、优点

1) 轻量级与易用性

Pinia比Vuex更轻量级,API设计简洁明了,易于上手和使用。

2).TypeScript支持

Pinia提供了完整的TypeScript支持,使得类型检查和编辑器提示更加友好。

3).插件系统

Pinia提供了一个插件系统,允许开发者通过插件来扩展其功能或改变其行为。

4).与Vue 3的整合

Pinia能够与Vue 3的组合式API无缝集成,使得状态管理代码更加清晰和模块化。

5) 支持Vue DevTools

Pinia支持Vue DevTools,允许开发者在浏览器中直接查看和调试Vue应用程序的状态。

2、缺点

1. 不支持时间旅行和编辑等调试功能

与Vuex相比,Pinia在调试功能方面略显不足,不支持时间旅行和编辑等高级调试功能。

五、Pinia的代码示例

1. 安装Pinia

在Vue 3项目中,你可以通过npm或yarn来安装Pinia:

npm install pinia
# 或者
yarn add pinia

2. 配置Pinia

在Vue 3项目中,安装完Pinia后,需要在应用的入口文件中创建并挂载Pinia实例:

import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';const app = createApp(App);
const pinia = createPinia();app.use(pinia);
app.mount('#app');

3. 定义Store

你可以通过defineStore函数来定义一个store:

import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({count: 0,}),actions: {increment() {this.count++;},decrement() {this.count--;},},
});

4. 在组件中使用Store

你可以通过useStore函数来访问定义的store,并在组件中使用它:

<template><div><p>{{ counter.count }}</p><button @click="counter.increment()">Increment</button><button @click="counter.decrement()">Decrement</button></div>
</template><script setup>
import { useCounterStore } from './store/counter';const counter = useCounterStore();
</script>

5. 使用Getters

你可以在store中定义getters,以在获取状态时进行额外的处理:

import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({count: 0,}),getters: {isPositive() {return this.count > 0;},},actions: {increment() {this.count++;},decrement() {this.count--;},},
});

在组件中使用getters:

<template><div><p>{{ counter.count }}</p><p>{{ counter.isPositive ? 'Positive' : 'Non-positive' }}</p><button @click="counter.increment()">Increment</button><button @click="counter.decrement()">Decrement</button></div>
</template><script setup>
import { useCounterStore } from './store/counter';const counter = useCounterStore();
</script>

总结

Pinia作为Vue 3的状态管理库,以其轻量级、易用性和灵活性,逐渐成为了Vue开发者的新选择。通过本文的介绍,相信你已经对Pinia有了更深入的了解,并能够将其应用到自己的Vue项目中。Pinia不仅提供了强大的状态管理功能,还与Vue 3的组合式API无缝集成,使得状态管理代码更加清晰和模块化。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/64861.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MHA binlog server

GTID模式下切换的时候&#xff0c;默认是不会去Master上获取binlog&#xff0c;如果配置了Binlog Server&#xff0c;MHA机会去binlog-server上获取&#xff0c;下面创建一个binlog server&#xff0c;并验证binlog server能够在主库binlog被清理的情况下提供日志恢复. 搭建bi…

针对超大规模病理图像分析!华中科技大学提出医学图像分割模型,提高干燥综合征诊断准确性

口干、眼干、皮肤干&#xff0c;每天伴有不明原因的肌肉酸痛和全身乏力&#xff0c;如果以上症状你「中招」了&#xff0c;除了考虑冬季天气干燥外&#xff0c;还应该警惕一种常见却总是被我们忽视的疾病——干燥综合征 (Sjgren’s Syndrome, SS)。 干燥综合征是以外分泌腺高度…

本地部署 LLaMA-Factory

本地部署 LLaMA-Factory 1. 本地部署 LLaMA-Factory2. 下载模型3. 微调模型3-1. 下载数据集3-2. 配置参数3-3. 启动微调3-4. 模型评估3-5. 模型对话 1. 本地部署 LLaMA-Factory 下载代码&#xff0c; git clone https://github.com/hiyouga/LLaMA-Factory.git cd LLaMA-Facto…

GPU环境配置

ubuntu基本环境配置 1. 更新包列表 sudo apt-get update sudo apt upgrade 2. 安装英伟达显卡驱动 使用wget在命令行下载驱动包 wget https://cn.download.nvidia.com/XFree86/Linux-x86_64/550.100/NVIDIA-Linux-x86_64-550.100.run 上面使用的是4090版本的&#xff0c;…

[创业之路-199]:《华为战略管理法-DSTE实战体系》- 3 - 价值转移理论与利润区理论

目录 一、价值转移理论 1.1. 什么是价值&#xff1f; 1.2. 什么价值创造 &#xff08;1&#xff09;、定义 &#xff08;2&#xff09;、影响价值创造的因素 &#xff08;3&#xff09;、价值创造的三个过程 &#xff08;4&#xff09;、价值创造的实践 &#xff08;5&…

ASP.NET |日常开发中定时任务详解

ASP.NET &#xff5c;日常开发中定时任务详解 前言一、定时任务的概念与用途1.1 定义1.2 应用场景 二、在ASP.NET中实现定时任务的方式2.1 使用System.Timers.Timer2.2 使用Quartz.NET 三、定时任务的部署与管理3.1 部署考虑因素3.2 管理与监控 结束语优质源码分享 ASP.NET &am…

安装openGauss数据库一主一备

安装openGauss数据库一主一备 一.安装准备1.修改/etc/selinux/config文件中的“SELINUX”值为“disabled”。2.重新启动操作系统。3.检查防火墙是否关闭。4.关闭防火墙并禁止开机重启。5.关闭交换内存6.设置主机名7.设置解析主机名和 IP 地址8.安装相关依赖包9.创建单独的用户组…

【unity】【游戏开发】Unity项目一运行就蓝屏报Watch Dog Timeout

【背景】 由于是蓝屏所以没法截屏&#xff0c;总之今天遇到了一开Unity&#xff0c;过一阵就蓝屏的情况&#xff0c;报Watch Dog Timeout。 【分析】 通过任务管理器查看&#xff0c;发现Unity占用率100%&#xff0c;再观察Unity内部&#xff0c;每次右下角出现一个Global I…

如何从 0 到 1 ,打造全新一代分布式数据架构

导读&#xff1a;本文从 DIKW&#xff08;数据、信息、知识、智慧&#xff09; 模型视角出发&#xff0c;探讨数字世界中数据的重要性问题。接着站在业务视角&#xff0c;讨论了在不断满足业务诉求&#xff08;特别是 AI 需求&#xff09;的过程中&#xff0c;数据系统是如何一…

java全栈day20--Web后端实战(Mybatis基础2)

一、Mybatis基础 1.1辅助配置 配置 SQL 提示。 默认在 mybatis 中编写 SQL 语句是不识别的。可以做如下配置&#xff1a; 现在就有sql提示了 新的问题 产生原因&#xff1a; Idea 和数据库没有建立连接&#xff0c;不识别表信息 解决方式&#xff1a;在 Idea 中配置 MySQL 数…

深度学习每周学习总结J9(Inception V3 算法实战与解析 - 天气识别)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 目录 0. 总结Inception V1 简介Inception V3 简介1. 设置GPU2. 导入数据及处理部分3. 划分数据集4. 模型构建部分5. 设置超参数&#xff1…

[Effective C++]条款38-39 复合和private继承

本文初发于 “天目中云的小站”&#xff0c;同步转载于此。 条款38 : 通过复合塑膜出has-a或"is-implemented-in-terms-of" 在条款32中我们认识了public继承意味着is-a, 本条款将会认识两个新的关系, 均可通过"复合"这一操作实现出来. 复合 所谓复合, 就是…

重温设计模式--中介者模式

中介者模式介绍 定义&#xff1a;中介者模式是一种行为设计模式&#xff0c;它通过引入一个中介者对象来封装一系列对象之间的交互。中介者使得各个对象之间不需要显式地相互引用&#xff0c;从而降低了它们之间的耦合度&#xff0c;并且可以更方便地对它们的交互进行管理和协调…

LeetCode 1661. 每台机器的进程平均运行时间

LeetCode 1661. 每台机器的进程平均运行时间 表: Activity ----------------------- | Column Name | Type | ----------------------- | machine_id | int | | process_id | int | | activity_type | enum | | timestamp | float | ----------------------- 该表展示了一家工厂…

【开源库 | xlsxio】C/C++读写.xlsx文件,xlsxio 在 Linux(Ubuntu18.04)的编译、交叉编译

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; ⏰发布时间⏰&#xff1a; 2024-12-20 …

NACA四位数字翼型

NACA四位数字翼型&#xff0c;以NACA 2412为例 第一位数字2 —相对弯度 第二位数字4 —相对弯度所有位置&#xff08;单位化后的&#xff09; 最末两位数字12 —相对厚度 所有NACA四位数字翼型的&#xff08;相对厚度所在的位置&#xff09;

DataX与DataX-Web安装与使用

DataX github地址&#xff1a;DataX/introduction.md at master alibaba/DataX GitHub 环境准备 Linux环境系统 JDK&#xff08;1.8及其以上版本&#xff0c;推荐1.8&#xff09; Python&#xff08;2或者3都可以&#xff09; Apache Maven 3.x&#xff08;源码编译安装…

Vue:父页面调用子页面方法等待完成

子页面&#xff1a; <template><div><!-- 子组件模板内容 --></div> </template><script> export default {methods: {submitForm:function() {// 需要等待完成的操作return new Promise((resolve, reject) {this.$refs["form"…

电子应用设计方案69:智能护眼台灯系统设计

智能护眼台灯系统设计 一、引言 随着人们对眼睛健康的重视&#xff0c;智能护眼台灯成为了越来越多人的选择。本设计方案旨在打造一款功能丰富、护眼效果显著且智能便捷的台灯系统。 二、系统概述 1. 系统目标 - 提供无频闪、无蓝光危害的均匀柔和光线&#xff0c;保护眼睛。…

35道面向初中级前端的基础面试题

新鲜出炉的8月前端面试题 跨域资源共享 CORS 阮一峰 3. JSONP 是什么&#xff1f; 这是我认为写得比较通俗易懂的一篇文章jsonp原理详解——终于搞清楚jsonp是啥了。 4. 事件绑定的方式 嵌入dom 按钮 直接绑定 btn.onclick function(){} 事件监听 btn.addEventList…