浏览器标签页通信

从a页面列表点击详情跳转至b页面，然后在b页面编辑数据，然后保存后，a页面的列表没有更新，需要点击刷新重新请求接口才行。

首先可以使用监听onStorage的方式，在进入a页面的时候，监听onStorage事件，在b页面保存的时候触发事件，拿到数据返回。

/utils/xxx.js
// 存本地存储
export function sendMsg(type, payload) {
    localStorage.setItem(type, JSON.stringify({
        payload,
        temp: Date.now()
    }))
}

// 监听存储事件
export function listenMsg(handler) {
    const storageHandler = (e) => 
        const data = JSON.parse(e.newValue)
        handler(e.key, data.payload)
    }
    window.addEventListener('storage', storageHandler)
    return () => {
        window.removeEventListener('storage', storageHandler)
    }
}

window.opener方法

1. 将获取列表方法存到window
2. 通过window.open方法跳转跳转到新的标签页，
3. 保存成功后调用存在window中的方法

/xxx.vue
// a页面
const router = new useRouter();
const list = '我是获取列表方法';
const to = () => {
  const { href } = router.resolve({
    path: "/provide",
  });
  window.getList = list.bind(window);
  window.open(href, "_blank");
};

// b页面
const add = () => {
  window.opener.window.getList();
};