Vue 3 中使用 Mitt.js语法糖实现全局事件总线

本教程将使用 <script setup lang="ts"> 语法糖，结合 TypeScript，演示如何在 Vue 3 中使用 Mitt.js 实现全局事件总线。

步骤：

1. 安装 Mitt:

   npm install --save mitt
   

2. 创建事件总线:

   新建一个 eventBus.ts 文件 (位置可以自定义)，用于创建和导出 Mitt 实例：

   // eventBus.ts
   import mitt from 'mitt';
   
   export type Events = {
    'message-sent': string;
    // 定义其他事件类型...
   };
   
   const emitter = mitt<Events>();
   export default emitter;
   

3. 在组件中使用：

• 发布事件:

  // ComponentA.vue
  <template>
   <button @click="sendMessage">发送消息</button>
  </template>
  
  <script setup lang="ts">
  import emitter from './eventBus';
  
  const sendMessage = () => {
   emitter.emit('message-sent', 'Hello from Component A!');
  };
  </script>
  

• 订阅事件:

  // ComponentB.vue
  <template>
   <div>{{ receivedMessage }}</div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted, onBeforeUnmount } from 'vue';
  import emitter from './eventBus';
  
  const receivedMessage = ref('');
  
  onMounted(() => {
   emitter.on('message-sent', (message) => {
     receivedMessage.value = message;
   });
  });
  
  onBeforeUnmount(() => {
   emitter.off('message-sent');
  });
  </script>
  

解释:

• <script setup lang="ts">: Vue 3 的语法糖，结合 TypeScript 使用，可以简化组件代码。
• type Events: 定义事件类型，提高代码可读性和类型安全性。
• mitt<Events>(): 创建一个带有类型推断的 Mitt 实例。

优势 (与之前方法相同):

• 轻量级: mitt 的体积非常小，不会给项目增加太多负担。
• 类型安全: 使用 TypeScript 时，mitt 提供了类型定义，可以更好地保证代码的安全性。
• 易于测试: mitt 的 API 简单清晰，易于编写单元测试。
• 性能优越: 相比于 Vue 实例，mitt 的性能更好。

总结：

使用 mitt 和 <script setup lang="ts"> 语法糖可以更简洁、更安全地实现 Vue 3 中的全局事件总线，提升代码的可读性、维护性和类型安全性。

注意: 记得在组件卸载前使用 emitter.off() 移除事件监听，防止内存泄漏。