Verwenden der BroadcastChannel-API mit Vue, um einen Verweis über mehrere Registerkarten hinweg zu synchronisieren

Wir versuchen, jedem in unserem Team Zeit zu sparen, nicht nur den Entwicklern: Manche Leute verbringen viel Zeit damit, unsere App für Kunden oder Demos zu konfigurieren, deshalb stellen wir sicher, dass sie so reibungslos wie möglich verläuft möglich. Wir versuchen beispielsweise, jede Änderung in Echtzeit vorzunehmen, sodass die App nicht neu geladen werden muss, damit Änderungen angezeigt werden.

Kürzlich haben wir herausgefunden, dass diese Leute normalerweise mit mehreren geöffneten Tabs arbeiten, um sicherzustellen, dass die Konfiguration auf mehreren Seiten der App wie erwartet funktioniert. Deshalb haben wir darüber nachgedacht, die Konfiguration tabübergreifend zu synchronisieren.

Wir wollten es nicht speichern, weder in der Sitzung, im lokalen Speicher oder sonst etwas, da wir dann sicherstellen müssen, dass es immer auf dem neuesten Stand ist.

Als wir auf die BroadcastChannel-API stießen, wusste ich noch nicht einmal, dass sie existiert. Es ist nicht ganz neu, aber Safari war laut CanIUse das letzte Unternehmen, das es implementiert hat. Jedenfalls wird es jetzt weitgehend unterstützt. Sie können es sich wie die gute alte window.postMessage() von iframe vorstellen, aber über mehrere Registerkarten desselben Ursprungs.

Zum Glück hat VueUse bereits eine kleine Composable-Funktion erstellt, um die Verwendung zu vereinfachen: https://vueuse.org/core/useBroadcastChannel/#usebroadcastchannel

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

Also haben wir darauf basierend ein kleines internes Composable erstellt, um sicherzustellen, dass ein Verweis immer zwischen allen Registerkarten synchronisiert ist:

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,
  );
};

Jetzt können wir also einen Verweis mit einer einzelnen Zeile synchronisieren:

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

Und voilà! Das sind einige Stunden, die jeden Monat teamübergreifend eingespart werden ?

Das obige ist der detaillierte Inhalt vonVerwenden der BroadcastChannel-API mit Vue, um einen Verweis über mehrere Registerkarten hinweg zu synchronisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!