vue3中mitt和pinia的区别和主要用途,是否有可重合的部分?

news2024/11/27 14:39:21

在 Vue 中,Mitt 和 Pinia 是两个不同的工具,它们的主要用途和功能有所不同,但在某些方面也存在重合的部分。

在这里插入图片描述

区别

Mitt:

Mitt 是一个简单而强大的事件总线库,用于在组件之间进行事件的发布和订阅。
它提供了一种简洁的方式来实现组件之间的通信,而无需借助 Pinia 或其他状态管理库。
使用方式类似于 Vue 2 的 EventBus,但在 Vue 3 中没有内置的 EventBus,因此需要通过第三方库如 mitt 来实现。

Pinia:

Pinia 是 Vue 的状态管理库,它允许您跨组件/页面共享状态。
Pinia 是 Vuex 的现代替代方案,提供了更简洁的 API 和更好的 TypeScript 支持。
它基于 Vue 的响应式系统实现,没有任何依赖,相较于 Vuex,Pinia 的代码量更小,运行更快。

pinia有永久化的需求

主要用途

Mitt:

主要用于组件之间的事件通信,例如在没有直接父子或兄弟关系的组件之间传递数据。
适用于需要在多个地方进行事件管理的小型项目或特定场景。

Pinia:

主要用于管理 Vue 应用中的全局状态,确保不同组件之间可以共享和管理状态。
适用于复杂的单页应用,特别是当状态管理需求较大时。

代码

Mitt:

# install
npm i mitt

案例中所用路径仅为参考

// utils/emitter.js
import mitt from "mitt"
const emitter = mitt()
export default emitter

// father.vue
<javascript setup>
import son1 from "son1.vue"
import son2 from "son2.vue"
</javascript>
<template>
	<!--本案例中先加载监听者son2才能监听到son1发送的内容-->
	<!--实际使用时可选择点击事件发送,那么就不需要考虑先后-->
	<son2 />
	<son1 />
</template>

// son1.vue
<template>
	...
</template>
<javascript setup>
import emitter from "../utils/emitter"
emitter.emit('p1','发送一个参数')
</javascript>

// son2.vue
<template>
	...
</template>
<javascript setup>
import emitter from "../utils/emitter.js"
emitter.on('p1',(msg)=>{console.log(msg)})
</javascript>

Pinia:

# install
npm i pinia

案例中所用路径仅为参考

// main.js
import { createApp } from 'vue'
import App from './App.vue'

import {createPinia} from "pinia"
const pinia = createPinia()
// 第一种写法:createApp(App).use(pinia).mount("#app")
// 第二种写法:
const app = createApp(App)
app.use(pinia) //方便以后加载其它工具
app.mount("#app")

// store/User.js
import {defineStore} from "pinia"
// 以下是选项式写法,还有更简便的组合式写法
export const useUserStore = defineStore('user',{
	// 定义数据
	state(){
		return {
			name: 'a',
			data:{
				title: 'b',
				num: 12
			}
		}
	},
	// 安全起见:提供包装数据的方法
	getters(){},
	// 安全起见:提供修改数据的方法
	actions(){}
})

// 获取及修改数据
// a.vue
<template>
...
</template>
<script setup>
import {useUserStore} from "../store/user.js"
const userStore = useUserStore()

// 获取
console.log(userStore.name)
console.log(userStore.data)

// 直接修改(官方不建议)
userStore.name = 'c'
// 直接批量修改(官方不建议)
userStore.$patch({
	name: 'd',
	data: {
		title: 'e',
		num: 13
	}
})
</script>

重合的部分

虽然 Mitt 和 Pinia 的主要用途不完全相同,但它们在某些方面确实存在重合的部分。

  • 例如,在一些小项目中,如果只是需要简单的事件通信,那么可以使用 Mitt 来实现;
  • 但如果项目逐渐变得复杂,需要管理更多的状态和逻辑,那么可能会考虑使用 Pinia 来替代或补充 Mitt。
  • 此外,Mitt 也可以与 Pinia 一起使用,以实现更复杂的状态管理和事件通信机制。

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

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

相关文章

【Linux】实现一个简易的shell命令行

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:Linux ⚙️操作环境:Xshell (操作系统:Ubuntu 22.04 server 64bit) 目录 一.项目简介 二.分析项目实现 三.逐步实现项目功能 1.获取命令行 2.解析命令行 3.指令的判断 4.普通命令的执行 四.完整项目代码 结语 一.项目简介…

计算生物学与生物信息学漫谈-1-测序一路走来

最近工作中&#xff0c;反思自己计算生物学基础非常薄弱&#xff0c;然而作为一门非常新兴的交叉学科&#xff0c;涉及计算机、物理、生物、数学等多多学科&#xff0c;国内并没有这样完善的教程&#xff0c;因此想要自己做一个教程&#xff0c;使用费曼学习法学习&#xff0c;…

【亚马逊云】基于 Amazon EKS 搭建开源向量数据库 Milvus

文章目录 一、先决条件1.1 安装AWS CLI ✅1.2 安装 EKS 相关工具✅1.3 创建 Amazon S3 存储桶✅1.4 创建 Amazon MSK 实例✅ 二、创建EKS集群三、创建 ebs-sc StorageClass四、安装 AWS Load Balancer Controller五、部署 Milvus 数据库5.1 添加 Milvus Helm 仓库5.2 配置 S3 作…

Vue2、Element中实现Enter模拟Tab,实现切换下一个框的效果

目录 &#x1f4c3;前序 &#x1f449;开发历程 &#x1f4bb;实际代码 &#x1f4fd;实现效果图 前序 在几乎所有的浏览器中&#xff0c;都具备通过 Tab 键来切换焦点的功能。然而&#xff0c;有些用户提出了强烈要求&#xff0c;希望能够增加通过 Enter 键…

进程间通信(二)消息队列、共享内存、信号量

文章目录 进程间通信System V IPC概述System V IPC 对象的访问消息队列示例--使用消息队列实现进程间的通信 共享内存示例--使用共享内存实现父子进程间的通信&#xff08;进程同步&#xff09;示例--使用进程实现之前的ATM案例&#xff08;进程互斥&#xff09; 信号量示例--利…

上传Gitee仓库流程图

推荐一个流程图工具 登录 | ProcessOnProcessOn是一个在线协作绘图平台&#xff0c;为用户提供强大、易用的作图工具&#xff01;支持在线创作流程图、思维导图、组织结构图、网络拓扑图、BPMN、UML图、UI界面原型设计、iOS界面原型设计等。同时依托于互联网实现了人与人之间的…

大厂常问iOS面试题–Runloop篇

大厂常问iOS面试题–Runloop篇 一.RunLoop概念 RunLoop顾名思义就是可以一直循环(loop)运行(run)的机制。这种机制通常称为“消息循环机制” NSRunLoop和CFRunLoopRef就是实现“消息循环机制”的对象。其实NSRunLoop本质是由CFRunLoopRef封装的&#xff0c;提供了面向对象的AP…

6个RAG进阶优化方案,对应14篇论文案例解析

本文对近几月我了解到的RAG优化策略进行总结, 每个优化策略都有相应的研究论文作为支撑。在01先总结优化方向, 02细化说明相应论文 在介绍RAG优化策略之前, 先说说知识库数据处理: 增强数据粒度&#xff1a;旨在提升文本标准化、一致性、事实准确性和丰富的上下文&#xff0c…

Acrel-1000变电站综合自动化系统及微机在化工企业中的应用方案

文&#xff1a;安科瑞郑桐 摘要&#xff1a;大型化工企业供配电具有的集约型特点&#xff0c;化工企业内35kV变电站和10kV变电所数量大、分布广&#xff0c;对于老的大多大型及中型化工企业而言&#xff0c;其变电站或变电所内高压电气设备为旧式继电保护装置&#xff0c;可靠…

详解Java的类文件结构(.class文件的结构)

this_class 指向常量池中索引为 2 的 CONSTANT_Class_info。super_class 指向常量池中索引为 3 的 CONSTANT_Class_info。由于没有接口&#xff0c;所以 interfaces 的信息为空。 对应 class 文件中的位置如下图所示。 06、字段表 一个类中定义的字段会被存储在字段表&#x…

zotero文献管理学习

1 zotero软件简介 zotero是一款开源的文献管理软件。如果你听说或使用过EndNote&#xff0c;那么可能会对“文献管理”有一定的概念。可以简单地这样理解&#xff1a;zotero一定程度上可以作为EndNote的平替。 EndNote需要注册付费&#xff0c;对于无专业科研机构隶属关系的企…

MATLAB运动目标检测系统

应用背景 运动目标的定位跟踪&#xff0c;检测识别&#xff0c;运动分析在图像压缩、运动分析、交通检测&#xff0c;智能监控等方面有主要的应用。 首先&#xff0c;在图像压缩中&#xff0c;运动目标检测技术可以在背景区域中将前景区域提取分割出来&#xff0c;只传递部分…

植物端粒到端粒(T2T)基因组研究进展与展望

鼠鼠跳槽了&#xff0c;因为现在公司发(bu)展(zhang)受(gong)限(zi)&#xff0c;只能跳一次&#xff0c;从大兴到昌平了。从二代ivd行业去三代T2T和泛基因组了。在这里我们分享一篇文章。 摘要&#xff1a;高质量的参考基因组是基因组学研究的基础。目前&#xff0c;大多数的参…

笨蛋学习FreeMarker

笨蛋学习FreeMarker FreeMarker参考网址创建实例引入Maven创建工具类创建实例并进行输出 FreeMarker数据类型布尔型&#xff1a;日期型&#xff1a;数值型&#xff1a;字符型&#xff1a;需要处理字符串为null的情况&#xff0c;否则会报错字符串为空不会报错cap_firstuncap_fi…

【银河麒麟高级服务器操作系统实例】金融行业TCP连接数猛增场景的系统优化

了解更多银河麒麟操作系统全新产品&#xff0c;请点击访问 麒麟软件产品专区&#xff1a;https://product.kylinos.cn 开发者专区&#xff1a;https://developer.kylinos.cn 文档中心&#xff1a;https://documentkylinos.cn 服务器环境以及配置 物理机/虚拟机/云/容器 物理…

12 django管理系统 - 注册与登录 - 登录

为了演示方便&#xff0c;我就直接使用models里的Admin来演示&#xff0c;不再创建用户模型了。 ok&#xff0c;先做基础配置 首先是在base.html中&#xff0c;新增登录和注册的入口 <ul class"nav navbar-nav navbar-right"><li><a href"/ac…

使用 VSCode 通过 Remote-SSH 连接远程服务器详细教程

使用 VSCode 通过 Remote-SSH 连接远程服务器详细教程 在日常开发中&#xff0c;许多开发者需要远程连接服务器进行代码编辑和调试。Visual Studio Code&#xff08;VSCode&#xff09;提供了一个非常强大的扩展——Remote-SSH&#xff0c;它允许我们通过 SSH 协议直接连接远程…

一图读懂“低空经济”

&#x1f482; 个人主页: 同学来啦&#x1f91f; 版权: 本文由【同学来啦】原创、在CSDN首发、需要转载请联系博主 &#x1f4ac; 如果文章对你有帮助&#xff0c;欢迎关注、点赞、收藏和订阅专栏哦 文章目录 ✈️ 一、低空经济简介&#x1f534; 1、基本含义&#x1f7e0; 2、…

【免费领取】基于javaweb实现的的日志管理系统

主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 项目描述 本工作日志管理系统是一个面向中小企业的简单的工作管理系统&#xff0c;它主要实现公…

【Python】Pandas基础操作手册(上)

哈喽&#xff0c;哈喽&#xff0c;大家好~ 我是你们的老朋友&#xff1a;保护小周ღ 今天给大家带来的是【Python】Pandas基础操作手册&#xff08;上&#xff09;本次主要讲解, python pandas 模块的一些基本概念, 以及了解 Dataframe 对象的创建, 赋值, 保存. 一起来看看叭…