mitt全局通信

安装mitt

"mitt": "^3.0.1",

• mitt 专注于最基本的事件订阅和发布，适合在需要轻量级事件管理的场景中使用
• mitt是不支持进行异步处理的

封装函数

在/@/utils/ 封装函数 eventBus.js

// eventBus.js
import mitt from 'mitt';

const eventBus = mitt();
export default eventBus;

通知

import eventBus from '/@/utils/eventBus.js';

const formatDateToString = (date: Date): string => {
	const year = date.getFullYear(); // 获取年份
	const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份，记得加1，因为getMonth()返回的月份是从0开始的
	const day = String(date.getDate()).padStart(2, '0'); // 获取日期
	return `${year}-${month}-${day}`; // 返回格式化后的字符串
};

/**
 * 日期选择框改变事件
 * @param val
 */
const dateChange = (val: any) => {
	const startDate = formatDateToString(new Date(val[0]));
	const endDate = formatDateToString(new Date(val[1]));
	eventBus.emit('boardQuery', {
		startDate: startDate,
		endDate: endDate
	})
}

接收

const handleEvent = async (data: any) => {
    // data第一次拿的是默认值，后续如果dateChange函数触发，data就是mitt传来的
	const param = {
		startDate: data.startDate,
		endDate: data.endDate,
	};
    // 自己的功能
	await loadData(param);
};

// 获取当前日期
const getCurrentDate = (): string => {
	const today = new Date();
	return today.toISOString().slice(0, 10); // 获取格式为 yyyy-MM-dd
};

// 计算一个月前的开始日期
const getStartMonth = (): string => {
	const today = new Date();
	const oneMonthAgo = new Date(today);
	oneMonthAgo.setMonth(today.getMonth() - 1); // 获取一个月前的日期
	return oneMonthAgo.toISOString().slice(0, 10); // 获取格式为 yyyy-MM-dd
};

onMounted(() => {
	const startDate = getStartMonth()
	const endDate = getCurrentDate()
	handleEvent({
		startDate: startDate,
		endDate: endDate
	})
	eventBus.on('boardQuery', handleEvent);
})


// 在页面销毁时取消监听，防止内存泄漏
onUnmounted(() => {
	eventBus.off('boardQuery', handleEvent);
});

打印的结果：
{
    "startDate": "2025-07-10",
    "endDate": "2025-08-06"
}