Heim > Web-Frontend > js-Tutorial > Verwenden der BroadcastChannel-API mit Vue, um einen Verweis über mehrere Registerkarten hinweg zu synchronisieren

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

DDD
Freigeben: 2024-12-04 10:52:10
Original
675 Leute haben es durchsucht

Using BroadcastChannel API with Vue to sync a ref across multiple tabs

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' })
Nach dem Login kopieren

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,
  );
};
Nach dem Login kopieren

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

const config = ref({})
useSync(config, 'config', { deep: true });
Nach dem Login kopieren

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage