Utilisation de l'API BroadcastChannel avec Vue pour synchroniser une référence sur plusieurs onglets

Nous essayons de faire gagner du temps à tous les membres de notre équipe, pas seulement aux développeurs : certaines personnes passent beaucoup de temps à configurer notre application pour les clients ou les démos, nous veillons donc à ce qu'elle soit aussi fluide que possible. possible. Par exemple, nous essayons d'effectuer chaque modification en temps réel, il n'est donc pas nécessaire de recharger l'application pour que les modifications apparaissent.

Récemment, nous avons découvert que ces personnes travaillent généralement avec plusieurs onglets ouverts, en nous assurant que la configuration fonctionne comme prévu dans plusieurs pages de l'application. Nous avons donc pensé à synchroniser la configuration entre les onglets.

Nous n'avons pas souhaité le stocker, ni en session, ni en stockage local ni autre, car il faudra alors s'assurer qu'il soit toujours à jour.

C'est à ce moment-là que nous sommes tombés sur l'API BroadcastChannel, je ne savais même pas qu'elle existait. Ce n'est pas assez nouveau, mais Safari a été le dernier à l'implémenter selon CanIUse. Quoi qu'il en soit, il est largement pris en charge maintenant. Vous pouvez y penser comme au bon vieux window.postMessage() d'iframe, mais sur plusieurs onglets de même origine.

Heureusement pour nous, VueUse a déjà créé un petit composable pour faciliter son utilisation : https://vueuse.org/core/useBroadcastChannel/#usebroadcastchannel

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

Nous avons donc créé un petit composable interne basé sur celui-ci pour nous assurer qu'une référence est toujours synchronisée entre tous les onglets :

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

Nous pouvons donc maintenant synchroniser une référence avec une seule ligne :

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

Et voilà ! Cela fait quelques heures gagnées chaque mois au sein des équipes ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!