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

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

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

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

就在那时我们遇到了 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中文网其他相关文章！