Vue跨标签页数据通信

本文主要是介绍Vue跨标签页数据通信，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

跨标签页数据通信

在同一浏览器项目地址处于不同的标签页中,建立两个页面间的数据通信，即：B页面新增/修改数据;A页面表格自动更新数据

跨标签页通信常见方案:

BroadCast Channel (广播频道)
Service Worker
LocalStorage Window.onstorage监听
Shared Worker 定时器轮询
IndexedDB 定时器轮询
cookie 定时器轮询
Websocket
Window.open、Window.postmesAge

方案样例

BroadCast Channel(广播频道): 需要保证每个标签页使用同一个频道,比如下方的’sync-update’

创建文件：crossTagMsg.js(表示跨标签页的消息)

const channel = new BroadcastChannel('sync-update');
export function sendMsg(type, content) {
channel.postMessage({
type,
content,
});
}
export function listenMsg(callback) {
const handler = (e) => {
callback && callback(e.data);
} 
channel.addEventListener('message', handler);
return () => {
channel.removeEventListener('message', handler);
};
}

新增/编辑页面add/edit.vue

// emp.value 这是个代理对象,无法被克隆,需要把它变成普通对象
// sendMsg( 'add-emp', { ...emp.value } );// 我这里用的对象替代了数组
sendMsg("update-emp", { ...this.emp })

列表页面

import { listenMsg } from "./utils/crossTagMsg"
var vm = null  //媒介
const unListen = listenMsg((info) => {if (info.type === "add-emp") {vm.emp.value.unshift(info.conten)} else if (info.type === "update-emp") {// 我这里用的对象替代了数组vm.emp = info.content// -------------使用list对象-------------//const i = emps.value.findIndex((emp) => emp.id === info.content.id)//if (i >= 0) {// vue3的写法//emps.value[i] = info.content// vue2写法, 或者用$set// emps.value[i] = emps.value.splice(i, 1, info.content)//}}
})data(){emp: { id: "sync-update", value1: "原值", value2: "内容" },
}created() {let _this = thisvm = _this  //this指向赋值
},
onUnmounted(unListen);