我們盡力為團隊中的每個人節省時間,而不僅僅是開發人員:有些人花費大量時間為客戶或演示配置我們的應用程序,因此我們確保它盡可能順利可能的。例如,我們嘗試即時進行每項更改,因此無需重新載入應用程式即可顯示更改。
最近,我們發現這些人通常會打開多個選項卡,確保配置在應用程式的多個頁面中按預期工作。因此我們考慮跨選項卡同步配置。
我們不想儲存它,無論是在會話、本地儲存或其他任何地方,因為我們必須確保它始終是最新的。
就在那時我們遇到了 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中文網其他相關文章!