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(表示跨标签页的消息)

javascript 复制代码
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

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

列表页面

javascript 复制代码
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 = this
    vm = _this  //this指向赋值
},
onUnmounted(unListen);
相关推荐
brief of gali2 分钟前
记录一个奇怪的前端布局现象
前端
计算机毕设指导66 分钟前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea
前端拾光者40 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理