Vite Cross Page Binding Demo

跨页面数据双向绑定

这个项目使用了原生JS的BroadcastChannel类，实现了同源页面的跨页面数据双向绑定。

这个项目还新增了基于原生JS的localStorage的实现，相比于BroadcastChannel的优点在于数据的本地存储与自动加载。

这个项目还新增了采用了vue的watch而非Proxy的实现，这种方式避免了对vue响应式生成的Proxy的破坏，并且使用时无需使用bind函数的返回值。

使用方法

Watch&localStorage方式

实现参见WatchStorage.ts

使用参见HelloWorld.vue

引入WatchStorage.ts：

import { bind, removeStorageListener } from './WatchStorage'

创建ref或reactive后传入，并传入一个唯一的键名作为绑定依据，（可选）使用返回的代理对象。浏览器的localStorage中会以传入的键名存储有效数据。

const countBind = bind(ref(0), 'count')

在onBeforeUnmount中使用removeStorageListener()回收资源。

onBeforeUnmount(() => {
  removeStorageListener()
})

BroadcastChannel方式

实现参见BindCast.ts

使用参见HelloWorld.vue

引入BindCast.ts：

import { bind, closeBroadcastChannel } from './BindCast'

创建ref或reactive后传入，并传入一个唯一的键名作为绑定依据，使用返回的代理对象。

const countBind = bind(ref(0), 'count')

在onBeforeUnmount中使用closeBroadcastChannel()回收资源。

onBeforeUnmount(() => {
  closeBroadcastChannel()
})

localStorage方式

实现参见BindStorage.ts

使用参见HelloWorld.vue

引入BindStorage.ts：

import { bind, removeStorageListener } from './BindStorage'

创建ref或reactive后传入，并传入一个唯一的键名作为绑定依据，使用返回的代理对象。浏览器的localStorage中会以传入的键名存储有效数据。

const countBind = bind(ref(0), 'count')

在onBeforeUnmount中使用removeStorageListener()回收资源。

onBeforeUnmount(() => {
  removeStorageListener()
})

运行样例

npm install
npm run dev

打开两个页面（如：http://localhost:5173/），点击count is 按钮，两个页面数据同步变换。