Svelte 中不相关组件之间的实时数据共享

Question

我有一个案例，我打开了两个标签 localhost:5000/ 和 localhost:5000/stream 并希望更新 / 路径中的变量并实时查看 stream 路径中的变化。 Store 不是这样工作的，如果我将本地存储与 store 一起使用，我只会在刷新 stream 页面后才获取数据，这不是我需要的。有解决办法吗？

Answer 1

有两种方法可以做到这一点：

使用本地存储

正如您已经在做的那样，但您还必须监听存储中的变化：

window.addEventListener('storage', () => {
  const stored = window.localStorage.getItem(...)
  // update the store
})

如果您希望数据在用户离开浏览器时仍然存在，这就可以正常工作。

广播频道API

另一种方法是使用 BroadcastChannel API，您可以在其中创建一个仅在至少打开一个选项卡时才持久存在的结构。

这里的概念是一样的：监听频道的变化并更新商店，如果你更新商店本身，广播它。

Svelte 中不相关组件之间的实时数据共享

Real-time data sharing in Svelte between unrelated components

svelte

svelte-component

svelte-3