Vue 关闭页面触发事件

需求：

点击“课程学习”打开一个新的界面

当关闭那个新的界面时刷新本页面的数据

实现方法

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的监听方法