解决 vue3 使用mitt(发布订阅库)时,多次触发事件订阅问题

2023-12-16

问题起源:

在日常vue项目开发中,有时会用到mitt(前身事件总线mittBus)进行事件传递,然而使用经常就是mitt().emit() , mitt().on 就结束了,未考虑到取消订阅事件, 订阅事件会创建回调函数,并将其添加到事件总线中。如果在实例卸载前不取消订阅,这些回调函数将一直存在于内存中, 这就导致同个订阅事件触发时相应多次。

解决:

<script lang="ts" setup>
  const { proxy } = getCurrentInstance();

  // 订阅事件
  proxy.mittBus.on('eventName', () => { })  

  // 实例卸载前取消相关事件订阅
  onBeforeUnmount(() => {
  
  // 取消订阅特定事件
  proxy.mittBus.off('eventName');
  
  // 取消订阅所以事件
  proxy.mittBus.all.clear();
});
</script>

附mitt github文档,以此记录
https://github.com/developit/mitt#parameters

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

解决 vue3 使用mitt(发布订阅库)时,多次触发事件订阅问题 的相关文章

  • 无法显示由 Fine-uploader 上传到 Amazon s3 的图像

    我现在尝试设置fineuploader s3以显示在aws服务器上成功上传的文件的图像 如示例页面上所做的那样 http fineuploader com s3 demo http fineuploader com s3 demo 我 仍然
  • 使用selenium IDE提取部分文本并将其放入变量中

    有人可以告诉我应该使用哪个命令来使用 Selenium Ide 从文本中仅提取数字 694575 并将其放入变量中以供进一步使用 这是带有文本的 div div class loginBoxTitle Edit Exhibition Cen
  • Ext JS - 如何滚动到文本区域的底部

    这是我下面的代码 如何滚动到文本区域的底部 它一定是类似的东西 Ext getCmp output setScrollPosition Ext getCmp output getScrollHeight 这是我的文本区域代码 var myW
  • 从 x,y 屏幕空间坐标查找 2D 等距网格上的列、行(将方程转换为函数)

    我试图在屏幕空间点 x y 的二维等距网格中找到行 列 现在我几乎知道我需要做什么 即找到上图中红色向量的长度 然后将其与表示网格边界的向量的长度 由黑色向量表示 进行比较 现在我在数学堆栈交换中寻求帮助 以获得用于计算点 x y 与黑色边
  • 计算Javascript中两次点击之间的时间

    我想用 javascript 计算属性的两次点击之间的时间 但我不知道如何 例如 a href click here a 如果用户单击多次 假设 5 秒内 我想显示警报 如果有帮助的话我正在使用 jQuery 我对 javascript 不
  • Flask wtf.quick_form 运行一些 javascript 并设置表单变量

    我正在创建博客文章 到目前为止已经使用普通的 html 表单完成了 我所做的一个有趣的想法是运行 javascript onclick 并使用页面中的额外数据在表单中设置一个隐藏变量 这很好地传递到服务器并通过 request form 获
  • 将 Sweet Alert 弹出窗口添加到 React 组件中的按钮

    我为 Bootstrap 和 React 找到了这个完美的 Sweet Alert 模块 我在 Meteor 应用程序中使用它 http djorg83 github io react bootstrap sweetalert http d
  • 何时不使用承诺[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在阅读了数十篇关于 es6 Promise 有多伟大以及为什么我们应该实现它们的文章之后 我有这样的感觉 ALL我的 不平凡的 JavaScri
  • 响应式网格布局框架[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何在 d3 js 中突出显示从根到选定节点的路径?

    我使用 d3 js 创建了一棵树 现在我创建了一个下拉菜单 其中包含树中所有节点的列表 现在 从下拉菜单中选择一个节点时 我想突出显示从根到该特定节点的路径 这个怎么做 首先创建一个 flatten 函数 它将分层数据变成一个 n 数组 f
  • 使用模态表单 ajax 超出 HTMLFormElement.toString 的最大调用堆栈大小

    我想使用模态窗口中的 ajax 请求提交表单 单击此链接可打开该模式 a class btn btn primary i class fa fa edit i Write a review a 模态窗口 div class modal fa
  • ElectronJS ReferenceError:导航器未定义

    我正在尝试在电子上制作自定义标题栏 但是当我启动我的应用程序时 我遇到了 ReferenceError 导航器未定义 问题 请帮忙 这是我的 main js 中的代码片段 My Codes https i stack imgur com c
  • 如何访问另一个 mobx 商店中的 mobx 商店?

    假设以下结构 stores RouterStore js UserStore js index js each of Store jsfiles 是一个 mobx 存储类 包含 observable and action index js只
  • 选中复选框时提交表单

    有没有办法在选中复选框时提交表单
  • 如何在网页上实现文件上传进度条?

    当用户将文件上传到我的网络应用程序时 我想显示比动画 gif 更有意义的内容 我还有哪些可能性 编辑 我正在使用 Net 但我不介意是否有人向我展示与平台无关的版本 如果您对这一切在客户端通常如何工作感兴趣 就是这样 所有解决方案都通过 J
  • WebRTC:通道、轨道和流与 RTP SSRC 和 RTP 会话之间的关系

    来自 Mozilla 网站 https developer mozilla org en US docs Web API Media Streams API https developer mozilla org en US docs We
  • 加载另一个 JS 脚本后加载

    这是我的代码 very big js file lots of html stuff 问题是 这些是异步加载的 有没有办法等待第二个脚本直到第一个脚本加载 如果您使用 jQuery 有一个非常简单的方法可以通过获取脚本 https api
  • 在javascript中动态生成行?

    我是 javascript 新手 我想在按下 Tab 时动态生成行 并希望获取在动态生成的行中输入的值 以便我可以在 servlet 代码中使用这些值 这是我的html
  • Express.js Passport认证自动失败跳过策略

    UPDATE 我已将代码从护照本地注册内部移至单独的处理程序 并且运行良好 问题在于 Passport 和本地注册的使用 但我不知道为什么 我使用 Node js Express Passport 进行身份验证和注册设置 这是以前使用过的标
  • 在 javascript 中使用 xPath 解析具有默认命名空间的 XML

    我需要创建一个 XML xPath 解析器 所有解析都必须在客户端进行 使用 JavaScript 我创建了一个 javascript 来执行此操作 在默认名称空间发挥作用之前 一切看起来都正常 我根本无法查询具有默认命名空间的 XML 我

随机推荐

  • 物联网网关

    物联网网关是 连接物联网设备和互联网的重要桥梁 它负责将物联网设备采集到的数据进行处理 存储和转发 使其能够与云端或其它设备进行通信 物联网网关的作用是实现物联网设备与云端的无缝连接和数据交互 物联网网关功能 数据采集 物联网网关可以从物联
  • CorelDRAW2024版本什么时候更新?有哪些新功能

    CorelDRAW2024 简称CDR 是一款专业的图形设计软件 该软件是加拿大Corel公司开发的一款功能强大的专业平面设计软件 矢量设计软件 矢量绘图软件 这款矢量图形制作工具软件广泛应用于商标设计 标志制作 封面设计 CIS设计 产品
  • BSP制作

    STM32系列驱动介绍 在RT Thread实时操作系统中 各种各样的设备驱动是通过一套I O设备管理框架来实现的 设备管理框架给上层应用提供了一套标准的设备操作API 开发者通过调用这些标准设备操作API 可以高效地完成和底层硬件外设的交
  • 正则表达式的资源

    https www regular expressions info index html https regex101 com
  • UART设备

    UART简介 UART Universal Asynchronous Receiver Transmitter 通用异步收发传输器 UART作为异步串口通信协议的一种 工作原理是将传输数据的每个字符一位接一位地传输 是在应用程序开发过程中使
  • 欧盟eDelivery的AS4解决方案

    为实现绿色和数字欧洲的愿景 欧盟启动了 数字欧洲计划 DEP 总预算为75 9亿欧元 重点是将数字技术带给企业 公民和公共行政部门 它将建立数字能力和基础设施 并以创建数字市场为目标 主要通过与成员国在先进计算和数据 人工智能和网络安全 私
  • HAL库学习

    CMSIS简介 CMSIS Cortex Microcontroller Software Interface Standard 微控制器软件接口标准 由ARM和其合作的芯片厂商 ST NXP 软件工具厂商 KEIL IAR 共同制定的标准
  • I/O设备模型

    I O设备模型 绝大部分的嵌入式系统都包括一些I O Input Outut 输入 输出 设备 例如仪器上的数据显示屏 工业设备上的串口通信 数据采集设备上用于保存数据的Flash或SD卡 以及网络设备的以太网接口等 I O设备模型框架 R
  • PIN设备

    引脚简介 芯片上的引脚一般分为4类 电源 时钟 控制与I O I O在使用模式上又分为General Purpose Input Output 通用输入 输出 简称GPIO 与功能复用I O 如SPI I2C UART 大多数MCU的引脚都
  • CleanMyMac X2024免费许可证(激活教程)

    CleanMyMac X是一款流行的系统优化工具 专为Mac用户设计 它可以帮助用户清理Mac系统中的垃圾文件 卸载不需要的程序 加速Mac性能以及保护Mac系统的安全 一 简介 CleanMyMac X是一款功能强大的系统优化工具 它可以
  • 中断管理学习

    中断管理 什么是中断 简单的解释就是系统正在处理某一个正常事件 忽然被另一个需要马上处理的紧急事件打断 系统转而处理这个紧急事件 待处理完毕 再恢复运行刚才被打断的事件 生活中 我们经常会遇到这样的场景 当你正在专心看书的时候 忽然来了一个
  • MacBook电脑内存容量小根本不够用?如何一键解决?

    得益于M1系列芯片的强势表现 很多朋友都换用了MacBook 首次接触到了macOS系统 但出乎意料的是 很多人就开始受罪了 明明这么出色的硬件 为何到处都不顺手呢 尤其是容量 MacBook相比同价位的Windows笔记本 硬盘本来就偏小
  • FL Studio21最新FL水果编曲软件中文版在哪下载?

    FL Studio21水果编曲软件是一款专业的音乐制作软件 被广泛地应用于电子音乐 hip hop 流行乐等多种音乐类型的制作 该软件提供了丰富的音频编曲工具和音乐效果器 让用户可以轻松地创作出高品质的音乐作品 同时 这也是一款非常易于上手
  • CleanMyMac X2024(Mac优化清理工具)v4.14.5中文版

    CleanMyMac X是一款颇受欢迎的专业清理软件 拥有十多项强大的功能 可以进行系统清理 清空废纸篓 清除大旧型文件 程序卸载 除恶意软件 系统维护等等 并且这款清理软件操作简易 非常好上手 特别适用于那些刚入手苹果系统的宝宝们 只需两
  • flstudio21.3.2304高级版水果编曲音乐软件

    flstudio高级版是一款适用于广泛领域的音频编辑软件 它支持多通道混音器和VST插件 包括数百种乐器和效果插件 它还为您提供了一个乐谱编辑器 需要对不同乐器的节奏进行必要的编辑 Flstudio具有许多内置电子合成声音 可提供更广泛的电
  • fl studio2024水果21.3免费汉化版

    fl studio2024全称Fruity Loops Studio2024 这款软件也被人们亲切的称之为水果 它是一款功能强大的音乐创作编辑软件 拥有全功能的录音室 大混音盘以及先进的音乐制作工具 用户通过使用该软件 就可以轻松制作出自己
  • 【408】计算机学科专业基础 - 计算机组成原理

    一 计算机系统概述 复习提示 本章是组成原理的概述 考查时易针对有关概念或性能指标出选择题 也可能综合后续章节的内容出有关性能分析的综合题 掌握本章的基本概念 是学好后续章节的基础 部分知识点在初学时理解不深刻也无须担忧 相信随着后续章节的
  • 汽车EDI:Chrysler EDI项目案例

    菲亚特克莱斯勒汽车Fiat Chrysler Automobiles FCA 是一家全球性汽车制造商 主营产品包括轿车 SUV 皮卡车 商用车和豪华车等多种车型 其旗下品牌包括菲亚特 克莱斯勒 道奇 Jeep Ram 阿尔法 罗密欧和玛莎拉
  • 物流EDI:COSCO的EDI对接

    当产品的原产地和最终目的地之间以及生产商和分销商之间实现了即时 安全和高效通信 意味着业务已经取得成功 无论是在物理层面的货物运输 还是在数据层面的信息交互 物流在供应链中都是至关重要的一环 物流发展进程的加快能够促进供应链各个环节实现完美
  • 解决 vue3 使用mitt(发布订阅库)时,多次触发事件订阅问题

    问题起源 在日常vue项目开发中 有时会用到mitt 前身事件总线mittBus 进行事件传递 然而使用经常就是mitt emit mitt on 就结束了 未考虑到取消订阅事件 订阅事件会创建回调函数 并将其添加到事件总线中 如果在实例卸