在Vue3+TypeScript 前端项目中使用事件总线Mitt

import { defineStore } from 'pinia';
import mitt, { Emitter } from 'mitt';
 
interface EventBusState {
  emitter: Emitter;
}
 
interface EventPayload {
  // 定义事件载荷的接口
  [key: string]: any;
}
 
export const useEventBus = defineStore({
  id: 'eventBus',
  state: (): EventBusState => ({
    emitter: mitt()
  }),
  actions: {
    emit(eventName: string, payload: EventPayload) {
      this.emitter.emit(eventName, payload);
    },
    on(eventName: string, callback: (payload: EventPayload) => void) {
      this.emitter.on(eventName, callback);
    },
    off(eventName: string, callback: (payload: EventPayload) => void) {
      this.emitter.off(eventName, callback);
    }
  }
});
 
// 使用示例
// 在某个组件中
 
// 引入store
import { useEventBus } from '@/store';
 
export default {
  setup() {
    const eventBus = useEventBus();
 
    // 监听事件
    eventBus.on('someEvent', (payload) => {
      console.log('Event received with payload:', payload);
    });
 
    // 触发事件
    eventBus.emit('someEvent', { message: 'Hello, Event Bus!' });
 
    // 取消监听
    onUnmounted(() => {
      eventBus.off('someEvent', callback);
    });
  }
};

这个代码示例展示了如何在Vue3和TypeScript项目中使用Pinia和Mitt创建一个事件总线，并在组件的setup函数中监听、触发和取消事件监听。这是一个简洁且可以直接使用的事件总线实现，可以作为创建事件驱动型前端应用的指导。