Mitt 库 事件的监听与触发

1. 介绍

Mitt 是一个轻量级 的 JavaScript 库，用于在应用程序中实现事件触发和监听。它不依赖任何外部库，功能简洁，主要用于在模块间进行事件传递。

体积小：Mitt 的压缩版本仅有几千字节，非常适合在前端框架中作为事件管理工具。 API 简洁：提供了三个主要的 API：on、off 和 emit。 适用于需要事件驱动开发的场景，尤其是在没有框架 （如 Vue、React）时的事件管理。

2. 安装

你可以通过 npm 或直接在 HTML 文件中使用 Mitt。

npm 安装

使用 npm 安装 Mitt：

npm install mitt

CDN 引入

你也可以通过 CDN 引入 Mitt：

<script src="https://cdn.jsdelivr.net/npm/mitt@3.0.0/dist/mitt.umd.js"></script>

通过 CDN 引入后，mitt 会挂载到全局对象中（window.mitt），你可以直接使用。

3. 基本用法

Mitt 提供了三个基本的方法来管理事件：

• on(event, handler) ：用于注册事件监听器。
• off(event, handler) ：用于注销事件监听器。
• emit(event, data) ：用于触发事件。

3.1在项目中引入

// https://www.npmjs.com/package/mitt
import mitt, { Emitter } from 'mitt';
// 类型
const emitter: Emitter<MittType> = mitt<MittType>();
// 导出
export default emitter;

3.2 事件的监听与触发

import mittBus from '/@/utils/mitt';  // 在页面中引入

// 监听消息更新事件
mittBus.on('updateMessageCount', getIsDot);   // getIsDot 监听的方法


// 移除事件监听器
mittBus.off('updateMessageCount', getIsDot);


// 触发事件更新消息数量
mittBus.emit('updateMessageCount');