將 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中文網其他相關文章！