VueUse useBroadcastChannel 实现 Vue的跨网页通讯

VueUse useBroadcastChannel 实现 Vue的跨网页通讯,当浏览器打开同一域名下的多个网页时，可以通过该API进行数据通讯传输数据，比如我在工作中遇到的一个场景禁止多个选项卡下登录系统就可通过该API实现，还有大家经常用的音乐网站在A网页点击播放，它可以在B网页的播放列表进行播放也是这个原理。

代码示例

import { ref } from 'vue'
import { useBroadcastChannel } from '@vueuse/core'

const {
  isSupported,
  channel,
  data,//接收到的消息
  post,//发生消息
  close,
  error,
  isClosed,
} = useBroadcastChannel({ name: 'ch' })

const message = ref('')

message.value = 'Hello, www.itxst.com'

//把消息广播出去
post(message.value)

// 关闭管道
close()

在线例子

例子