【Pinia】Pinia和Vuex对比

        Pinia 是 Vue 官方团队成员专门开发的一个全新状态管理库,并且 Vue 的官方状态管理库已经更改为了 Pinia。 在 Vuex 官方仓库中也介绍说可以把 Pinia 当成是不同名称的 Vuex 5,这也意味不会再出 5 版本了。

优点

1. 更加轻量级,压缩后提交只有1.6kb。

2. 完整的 TS 的支持,Pinia 源码完全由 TS 编码完成。

        Pinia 在与 TS 一起使用时,具有可靠的类型判断支持;Vuex 之前对 TS 的支持很不友好。

3. 移除 mutations,只剩下 state 、 actions 、 getters,在store内部直接使用this使用state里的数据。

        一旦 store 被实例化,就可以直接在 store 上访问 state、getters 和 actions 中定义的任何属性;而在使用 Vuex 的时候,更改状态需要纠结选取 mutation 还是 action。

4. 不再有 Vuex 里多个 modules 的嵌套结构,可以定义多个 store 并灵活使用

5. 不会再有module的命名空间的概念,不需要记住他们的复杂关系。

6. 支持服务端渲染(SSR)。

7. 更友好的代码分割机制。

8. 提供了 Pinia 状态持久化。配置 | Pinia Plugin Persistedstate

举例说明

针对第4点

        Pinia版本:假设我们有一个购物车应用,需要管理用户信息和购物车商品信息,可以用两个 Store 来实现。

// userStore.js
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {state: () => ({name: '',age: 0,}),actions: {updateName(newName) {this.name = newName;},},
});// cartStore.js
import { defineStore } from 'pinia';
export const useCartStore = defineStore('cart', {state: () => ({items: [],}),actions: {addItem(item) {this.items.push(item);},},
});

        Vuex版本:在组件中,通过 this.$store 来访问状态,需要通过命名空间来区分模块,例如 this.$store.state.user.namethis.$store.commit('cart/addItem', item)

// store.js
import { createStore } from 'vuex';
export default createStore({modules: {// 用户user: {state: {name: '',age: 0,},mutations: {updateName(state, newName) {state.name = newName;},},},// 购物车cart: {state: {items: [],},mutations: {addItem(state, item) {state.items.push(item);},},},},
});

针对第5点

        Vuex 中,如果没有命名空间,多个模块有相同名称的方法,如模块A和模块B都有updateName,使用起来会冲突,因为 Vuex 不知道要调用哪个模块的 updateName

// 模块 A
mutations: {updateName(state, newName) {state.name = newName;},
}// 模块 B
mutations: {updateName(state, newName) {state.name = newName;},
}

        通过命名空间namespaced: true,可以将每个模块的作用域限制在模块内部,避免冲突。

// 模块 A
namespaced: true, 
mutations: {updateName(state, newName) {state.name = newName;},
}// 模块 B
namespaced: true, 
mutations: {updateName(state, newName) {state.name = newName;},
}// 组件中使用
this.$store.commit('moduleA/updateName', 'John');
this.$store.commit('moduleB/updateName', 'Jane');

        当然,在 pinia 中没有模块化的概念了,就更不存在需要使用命名空间了。

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

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

相关文章

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件: 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…

Oracle双平面适用场景讨论会议

4月28日,我在杭州组织召开了Oracle双平面会议讨论沙龙。在国产化数据库浪潮的今天,Oracle数据库作为国产数据库的应急库,在国产数据库发生故障或者性能下降时,如何更好的使用Oracle。会议主题如下: 1、背景与痛点速览&…

10.Linux进程信号

1. 理解信号 信号VS信号量 老婆:老婆饼-》没有任何关系!信号:闹钟,上课铃声,脸色...人-》进程;信号中断人正在做的事,是一种事件的异步通知机制; 我们自习一会,等张三回…

求解插值多项式及其余项表达式

例 求满足 P ( x j ) f ( x j ) P(x_j) f(x_j) P(xj​)f(xj​) ( j 0 , 1 , 2 j0,1,2 j0,1,2) 及 P ′ ( x 1 ) f ′ ( x 1 ) P(x_1) f(x_1) P′(x1​)f′(x1​) 的插值多项式及其余项表达式。 解: 由给定条件,可确定次数不超过3的插值多项式。…

C++刷题:日期模拟(1)

(注:本文所展示代码均为本人所写,不一定为最优) 我们首先用纯逻辑和手动计算来拆解日期模拟题,再来代码实现,看看这些问题的底层思路怎么玩明白~ 一、基础日期计算:直接算“过几天是…

深入剖析Nginx:从入门到高并发架构实战

深入剖析Nginx:从入门到高并发架构实战 摘要:本文全面解析Nginx的核心功能、架构原理及实战配置,涵盖负载均衡、反向代理、动静分离等高级应用场景,助你构建高性能Web服务架构。 一、Nginx是什么?为什么它如此重要&…

Qt客户端技巧 -- 窗口美化 -- 圆角窗口

不解析&#xff0c;直接给代码例子 利用窗口重绘事件处理函数paintEvent main.cpp #include <QtCore/qglobal.h> #if QT_VERSION > 0x050000 #include <QtWidgets/QApplication> #else #include <QtGui/QApplication> #endif#include "roundedwin…

Three.js学习笔记-三要素

Three.js 学习笔记-三要素 一、Three.js 简介 (一)前世今生 Three.js 是一款运行在浏览器中的 3D 引擎,由 Ricardo Cabello(Mr.doob)在 2010 年 4 月于 GitHub 首次发布 。其起源可追溯到本世纪初,代码最初用 ActionScript 编写,2009 年移植到 JavaScript。随着 Web…

动力电池点焊机:驱动电池焊接高效与可靠的核心力量|比斯特自动化

在新能源汽车与储能设备需求激增的背景下&#xff0c;动力电池的制造工艺直接影响产品性能与安全性。作为电芯与极耳连接的核心设备&#xff0c;点焊机如何平衡效率、精度与可靠性&#xff0c;成为电池企业关注的重点。 动力电池点焊机的核心功能是确保电芯与极耳的稳固连接。…

OpenCV CUDA模块图像处理------创建一个模板匹配(Template Matching)对象函数createTemplateMatching()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 创建一个用于在 GPU 上执行模板匹配的 TemplateMatching 对象。 该函数返回一个指向 TemplateMatching 的智能指针&#xff08;Ptr&#xff09;…

natapp 内网穿透失败

连不上网络错误调试排查详解 - NATAPP-内网穿透 基于ngrok的国内高速内网映射工具 如何将DNS服务器修改为114.114.114.114_百度知道 连不上/错误信息等问题解决汇总 - NATAPP-内网穿透 基于ngrok的国内高速内网映射工具 nslookup auth.natapp.cnping auth.natapp.cn

游戏(game)

题目描述 小明最近迷上了一款游戏&#xff0c;并且很想成为这款游戏的高手&#xff0c;这款游戏需要用 资源来买装备。他刚开始的资源价值为0,于是他每天都会做日常任务来获得价值为1的资源。 这款游戏中有每日商店&#xff0c;小明已经提前知道了接下来n天会出现的装备&#x…

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…

关于脏读,幻读,可重复读的学习

mysql 可以查询当前事务隔离级别 默认是RR repeatable-read 如果要测脏读 要配成未提交读 RU 读到了未提交的数据。 3.演示不可重复读 要改成提交读 RC 这个是指事务还未结束&#xff0c;其他事务修改了值。导致我两次读的不一样。 4.RR–可以解决不可重复读 小总结&…

华为云Astro中服务编排、自定义模型,页面表格之间有什么关系?如何连接起来?如何操作?

目录 一、核心关系解析 二、连接方式与操作步骤 (一)服务编排与自定义模型的连接 (二)自定义模型与页面表格的连接 (三)服务编排与页面表格的连接 三、操作示例:构建数据处理闭环 场景:用户在页面表格中修改设备信息,触发服务编排校验数据并更新数据库。 四、…

Docker镜像无法拉取问题解决办法

最近再学习RabbitMQ&#xff0c;需要从Docker镜像中拉取rabbitMQ&#xff0c;但是下拉失败 总的来说就是无法和docker镜像远程仓库建立连接 我又去尝试ping docker.io发现根本没有反应&#xff0c;还是无法连接找了许多办法还是没有办法解决&#xff0c;最后才发现是镜像问题&a…

向 AI Search 迈进,腾讯云 ES 自研 v-pack 向量增强插件揭秘

作者&#xff1a;来自腾讯云刘忠奇 2025 年 1 月&#xff0c;腾讯云 ES 团队上线了 Elasticsearch 8.16.1 AI 搜索增强版&#xff0c;此发布版本重点提升了向量搜索、混合搜索的能力&#xff0c;为 RAG 类的 AI Search 场景保驾护航。除了紧跟 ES 官方在向量搜索上的大幅优化动…

electron-vite串口通信

一、构建项目后&#xff0c;安装“串口通信库” npm install serialport二、设置 npm install --save-dev electron-rebuild ./node_modules/.bin/electron-rebuild 注意&#xff1a;如果执行报错以下问题 1、未配置python变量 2、没有Microsoft Visual Studio BuildTools 3…

Cisco IOS XE WLC 任意文件上传漏洞复现(CVE-2025-20188)

免责申明: 本文所描述的漏洞及其复现步骤仅供网络安全研究与教育目的使用。任何人不得将本文提供的信息用于非法目的或未经授权的系统测试。作者不对任何由于使用本文信息而导致的直接或间接损害承担责任。如涉及侵权,请及时与我们联系,我们将尽快处理并删除相关内容。 前…

从 iPhone 备份照片: 保存iPhone图片的5种方法

随着智能手机越来越融入我们的生活&#xff0c;我们的照片已成为我们设备上最有价值的数据形式之一。然而&#xff0c;iPhone内部存储空间仍然有限&#xff0c;因此我们需要将iPhone中的照片备份到另一个地方&#xff0c;以释放空间并确保珍贵的图像记忆的安全。阅读本指南&…