首页 >web前端 >js教程 >将 BroadcastChannel API 与 Vue 结合使用以跨多个选项卡同步引用

将 BroadcastChannel API 与 Vue 结合使用以跨多个选项卡同步引用

DDD
DDD原创
2024-12-04 10:52:10667浏览

Using BroadcastChannel API with Vue to sync a ref across multiple tabs

我们尽力为团队中的每个人节省时间,而不仅仅是开发人员:有些人花费大量时间为客户或演示配置我们的应用程序,因此我们确保它尽可能顺利可能的。例如,我们尝试实时进行每项更改,因此无需重新加载应用程序即可显示更改。

最近,我们发现这些人通常会打开多个选项卡,确保配置在应用程序的多个页面中按预期工作。因此我们考虑跨选项卡同步配置。

我们不想存储它,无论是在会话、本地存储还是其他任何地方,因为我们必须确保它始终是最新的。

就在那时我们遇到了 BroadcastChannel API,我什至不知道它的存在。它并不是很新,但根据 CanIUse 的说法,Safari 是最后一个实现它的。无论如何,现在已经得到了很大程度的支持。您可以将其视为 iframe 中旧的 window.postMessage(),但跨同源的多个选项卡。

幸运的是,VueUse 已经做了一些可组合的操作来简化其使用:https://vueuse.org/core/useBroadcastChannel/#usebroadcastchannel

const {
  isSupported,
  channel,
  post,
  close,
  error,
  isClosed,
} = useBroadcastChannel({ name: 'unique-name' })

因此我们基于它创建了一些内部可组合项,以确保引用始终在所有选项卡之间同步:

import { useBroadcastChannel, watchPausable } from '@vueuse/core';
import { nextTick, watch } from 'vue';

import type { Ref } from 'vue';

export const useSync = <T>(value: Ref<T>, name: string, options?: { immediate?: boolean; deep?: boolean }) => {
  // Name must be unique
  const { post, data } = useBroadcastChannel<T, T>({ name });

  // When value changes locally, update other tabs
  const { pause, resume } = watchPausable(
    () => value.value,
    (newValue) => {
      post(structuredClone(newValue));
    },
    options,
  );

  // When value changes in another tab, update it locally
  watch(
    () => data.value,
    async (newValue) => {
      // Prevent watch loop when updating config
      pause();
      value.value = newValue;
      await nextTick();
      resume();
    },
    options,
  );
};

现在我们可以用一行同步引用:

const config = ref({})
useSync(config, 'config', { deep: true });

瞧!各个团队每月可以节省一些时间?

以上是将 BroadcastChannel API 与 Vue 结合使用以跨多个选项卡同步引用的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn