小型 Vue 项目,该不该用 Pinia 、Vuex呢?

news/2024/12/24 3:12:06 标签: vue.js, 前端, javascript

说到 Vue3 的状态管理,我们会第一时间想到 Pinia、Vuex,但是经过很长一段时间的 Vue3 项目开发,我逐渐发现,我们真的有必要用 Pinia、Vuex 这类的状态管理工具吗?

带着这样的疑惑,我首先是想知道一下 Pinia、Vuex 的优点到底是什么,企图说服自己去使用它们来做状态管理~

优点?非他不可?

看看上面所说的优点,其实我们仔细想一下,这些优点貌似也不是那么的非他不可吧?

  • 集中式状态管理: 其实 Ref、Reactive 也可以做到,只需要写在某个 .js/.ts 文件里即可
  • 模块化: 其实 Ref、Reactive 也可以做到,不同模块的状态写到不同的 .js/.ts 文件里即可
  • 类型推导: 这个是 TypeScript 层面的事情,与状态管理工具无关
  • 响应式和懒加载: Ref、Reactive 也可以做到,本身就是响应式,并且引用到 .js/.ts 才会去初始化
  • 持久化和插件扩展: 实现起来不难,并不是什么技术难点

综上所述,貌似在 Vue3 项目中可以使用 Ref、Reactive 去做状态管理就行了?

其实还是优点的
其实 Pinia、Vuex 这类状态管理工具还是有一个很大的优点的,那就是逻辑更加紧凑,可维护性 更高,不过我知道我这个看法是比较主观的看法

我还是推荐一些比较小的项目,可以使用 Ref、Reactive 去进行状态管理,但是如果是大型项目的话,确实还是需要 Pinia、Vuex 这类状态管理工具

Ref、Reactive
Vue3 的一些 API 对比 React 的好处就是,这些 API 并不一定需要在组件中去声明就比如你想要做局部状态管理的时候,可以直接使用 reactive、ref 这类 API 来完成

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
这样能达到局部状态管理,多组件共用同一个状态的效果,请看下图
在这里插入图片描述
effectScope
Vue3 有一个超级冷门的 API 叫 effectScope ,这个 API 非常强大,但是很多人都不知道它当然,既然很少人知道它,那自然就很少人知道,Pinia 的底层原理就是依赖了 effectScope

在这里插入图片描述
既然 Pinia 是通过effectScope来实现的,那么,我们自然也可以直接使用这个 API 来做状态管理~其实已经有人做过这件事了,就比如 vueuse 中的

在这里插入图片描述
我们可以直接用这个 Hooks 来进行状态管理,如果是使用 effectScope 来进行管理的话,状态就不需要写在 Hooks 外部了,因为 effectScope 内部逻辑只会执行一次,无论你调用多少次

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

利用 effectScope 也能达到组件之间共享状态~

在这里插入图片描述


http://www.niftyadmin.cn/n/5797256.html

相关文章

在 Sanic 应用中使用内存缓存管理 IP 黑名单

[外链图片转存中…(img-Pm0K9mzd-1734859380698)] 在现代 web 应用中,保护 API 接口免受恶意请求的攻击至关重要。IP 黑名单是一种常见的安全措施,可以有效阻止某些 IP 地址的访问。本文将介绍如何在 Python 的 Sanic 框架中实现 IP 黑名单功能&#xf…

【HarmonyOs学习日志(14)】计算机网络之域名系统DNS

域名系统DNS 域名系统DNS——从域名解析出IP地址 文章目录 域名系统DNS概述域名到IP地址的解析 互联网的域名结构命名标准 域名服务器域名的解析过程 概述 域名系统DNS(Domain Name System)是互联网使用的命名系统,用来把便于人们使用的机器…

Qt中的QProcess与Boost.Interprocess:实现多进程编程

目录 QProcess简介 启动进程的不同方式 例子1:打开记事本程序 例子2:执行带有管道(|)的Linux命令 同步进程API Boost.Interprocess简介 (一)共享内存: (二)命名信…

kubernates实战

使用k8s来部署tomcat 1、创建一个部署,并指定镜像地址 kubectl create deployment tomcat6 --imagetomcat:6.0.53-jre82、查看部署pod状态 kubectl get pods # 获取default名称空间下的pods kubectl get pods --all-namespaces # 获取所有名称空间下的pods kubect…

【网络】超以太网联盟 UEC|下一代 “RoCE” 协议--编辑中

术语 UEC: 超级以太联盟 UET: 超级以太传输协议 Tail latency: 尾部延迟,(以通信阶段最后一条消息的到达时间为衡量标准)是系统性能的关键指标。 未来 AI 和 HPC 网络的关键需求 为了实现低尾延迟,UEC 规范通过满足下一代应用…

HarmonyOS 实践 - 设计模式在代码中的作用

文章目录 前言设计模式概述单例模式:全局状态管理代码分析 策略模式:界面主题切换代码分析 示例测试单例模式测试策略模式测试 体验评价总结 前言 在软件开发中,设计模式是公认的最佳实践,它能帮助开发者通过模块化和规范化的代码…

【Mybatis-Plus】连表查询 逻辑删除 多租户

文章目录 连表查询逻辑删除多租户 连表查询 引入 mybatis-plus-join-boot-starter 依赖 <dependency><groupId>com.github.yulichang</groupId><artifactId>mybatis-plus-join-boot-starter</artifactId><version>1.5.1</version>…

VSCode 中 Git 功能比较:内置 Git、GitLens 与 Git History 插件

在软件开发领域&#xff0c;版本控制是维护代码变更的重要工具。Git 作为最流行的版本控制系统&#xff0c;被广泛集成在各种代码编辑器中。Visual Studio Code&#xff08;VSCode&#xff09;不仅内置了 Git 支持&#xff0c;还提供了丰富的扩展来增强 Git 功能。本文将对比 V…