首頁 > web前端 > js教程 > 將 BroadcastChannel API 與 Vue 結合使用以跨多個選項卡同步引用

將 BroadcastChannel API 與 Vue 結合使用以跨多個選項卡同步引用

DDD
發布: 2024-12-04 10:52:10
原創
499 人瀏覽過

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

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板