Menggunakan API BroadcastChannel dengan Vue untuk menyegerakkan ref merentas berbilang tab

Kami cuba menjimatkan masa untuk semua orang dalam pasukan kami, bukan sahaja pembangun: sesetengah orang menghabiskan banyak masa untuk mengkonfigurasi apl kami untuk pelanggan atau tunjuk cara, jadi kami memastikan ia selancar mungkin. Contohnya, kami cuba membuat setiap perubahan masa nyata, jadi tidak perlu memuatkan semula apl untuk perubahan muncul.

Baru-baru ini, kami mendapati orang tersebut biasanya bekerja dengan berbilang tab dibuka, memastikan konfigurasi berfungsi seperti yang diharapkan dalam berbilang halaman apl. Jadi kami berfikir tentang menyegerakkan konfigurasi merentas tab.

Kami tidak mahu menyimpannya, tidak dalam sesi, storan tempatan atau apa-apa lagi, kerana kami kemudiannya perlu memastikan ia sentiasa terkini.

Ketika itulah kami menemui API BroadcastChannel, saya tidak tahu pun ia wujud. Ia bukanlah sesuatu yang baru, tetapi Safari adalah yang terakhir melaksanakannya mengikut CanIUse. Bagaimanapun ia sebahagian besarnya disokong sekarang. Anda boleh menganggapnya seperti window.postMessage() lama yang bagus daripada iframe, tetapi merentas berbilang tab dari asal yang sama.

Nasib baik untuk kami, VueUse telah membuat sedikit kompos untuk memudahkan penggunaannya: https://vueuse.org/core/useBroadcastChannel/#usebroadcastchannel

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

Jadi kami mencipta sedikit in house composable berdasarkannya untuk memastikan ref sentiasa disegerakkan antara semua tab:

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

Jadi sekarang kita boleh menyegerakkan ref dengan satu baris:

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

Dan voilà! Itulah beberapa jam yang disimpan setiap bulan merentas pasukan ?

Atas ialah kandungan terperinci Menggunakan API BroadcastChannel dengan Vue untuk menyegerakkan ref merentas berbilang tab. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!