Vue で BroadcastChannel API を使用して複数のタブ間で参照を同期する

私たちは、開発者だけでなく、チーム全員の時間を節約するよう努めています。クライアントやデモ用にアプリの構成に多くの時間を費やしている人もいます。そのため、私たちはそれができるだけスムーズであることを確認しています。可能。たとえば、すべての変更をリアルタイムで行うよう努めているため、変更を表示するためにアプリをリロードする必要はありません。

最近、これらのユーザーは通常複数のタブを開いて作業しており、アプリの複数のページで構成が期待どおりに機能することを確認していることがわかりました。そこで、タブ間で設定を同期することを考えました。

セッションやローカル ストレージなどに保存することは望ましくありませんでした。保存すると、常に最新の状態であることを確認する必要があります。

私たちが 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,
  );
};

これで、単一行で ref を同期できるようになりました。

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

そして出来上がりです！チーム全体で毎月数時間を節約できることになります?

以上がVue で BroadcastChannel API を使用して複数のタブ間で参照を同期するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。