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

2023-12-14 05:22:40

问题起源:

在日常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

文章来源:https://blog.csdn.net/Centenario_0/article/details/134873184
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。