需求:
点击“课程学习”打开一个新的界面
当关闭那个新的界面时刷新本页面的数据
实现方法
event.js
const events = {};
const globalEventPrefix = 'es_global_event_';
export function addListener(event, handler) {
if (!events['event_' + event]) {
events['event_' + event] = [];
}
if (!events['event_' + event].some(item => item === handler)) {
events['event_' + event].push(handler);
}
}
export function removeListener(event, handler) {
if (!events['event_' + event]) {
return;
}
const handlerIndex = events['event_' + event].findIndex(item => item === handler);
if (handlerIndex >= 0) {
events['event_' + event].splice(handlerIndex, 1);
}
}
export function trigger(event, data) {
const eventData = {
event: event,
data: data,
date: new Date(),
};
// 触发其他窗口事件处理器
window.localStorage.setItem(globalEventPrefix + event, JSON.stringify(eventData));
// 触发当前窗口的事件处理器
if (events['event_' + event]) {
events['event_' + event].forEach(handler => {
handler(data);
});
}
}
export function initGlobalEvents() {
window.addEventListener('storage', function (e) {
if (e.key.startsWith(globalEventPrefix)) {
const eventName = e.key.substring(globalEventPrefix.length);
if (events['event_' + eventName]) {
const eventData = JSON.parse(e.newValue);
events['event_' + eventName].forEach(handler => {
handler(eventData.data);
});
}
}
});
}
本页面
import { addListener, removeListener } from 'events.js';
mounted() {
addListener(this.eventName, this.init);
},
beforeUnmount() {
removeListener(this.eventName, this.init);
},
新开页面
import { trigger } from 'events.js';
mounted() {
window.addEventListener('beforeunload', () => {
trigger(this.eventName);
});
},
beforeUnmount() {
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e));
},
踩坑
直接在beforeUnmount()中调用trigger函数不生效,需使用window的监听方法