vue跨标签页通信（BroadcastChannel）方案

日常业务开发中我们常常会碰到如下的场景，即两个标签页之间的通信问题。我们在第一个标签页如何执行操作后在第二个标签页获取到信息

BroadcastChannel API 为我们提供了一种快捷且高效的途径
首先我们需要创建一个可以在多数环境下都可以快速使用的方法，在工程的任意位置创建一个可以访问的bol.ts/js 文件，当然你可以叫它任何你想叫的名字

1.构建通道

//跨标签页通信方案 ‘Msg’即通道名称，可以是任何你想叫的名称
const bol=new BroadcastChannel('Msg')

2.创建发送及接收的方法

export const sendMsg=(type:string,content:any)=>{
    //传入的内容必须是普通类型 象形式对象进行传输时请转换成普通类型
    bol.postMessage({
        type,
        content
    })
}
//在监听获取方法内部我们需要多考虑一点关闭事件的方式，在空闲或者释放掉标签页面情况下不再执行监听
export const listenMsg = (callback:any)=>{
    const handler=(e:any)=>{
        callback&&callback(e.data)
    }
    bol.addEventListener('message',handler);
    //在组件卸载之后将监听事件关闭
    return () =>{
        bol.removeEventListener('message',handler)
        bol.close();
    }
}

发送消息标签页的使用

    import { sendMsg } from "../../utils/bol";
    
     const setInfo =ref()
     setInfo.value ={ name:"123", code:1 }
     //消息发送
     const handleMsg=(type:number)=>{
                
                sendMsg('fly', setInfo.value)

       }

//接收消息标签页

 import { listenMsg } from "../../utils/bol";
    const clearBol = listenMsg((msg:any)=>{
       console.log('收到',msg)
     })
    //销毁
      onUnmounted(()=>{ clearBol() })

第一次测试

噶了！! 并没又直接获取到反而在发送的时候就报错了,再仔细看看发送的消息。setInfo.value
这个东西目前是被ref创建并代理的东西，一个引用类型且被代理的东西肯定是不会允许克隆的，毕竟大家指向的地址是同一个
修改一下

    const handleMsg =(type:number) => {
          
          sendMsg('fly', {...setInfo.value})
     }

成功接收~~