vueのPiniaの読み込み中フラグ

読み込み中のフラグ管理

loadingStatus.js

import { defineStore } from "pinia";

/** UUIDを安全に生成する関数（古い環境対応） */
function safeUUID() {
  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
    return crypto.randomUUID();
  }
  // fallback（古いブラウザやNode用）
  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
    const r = (Math.random() * 16) | 0;
    const v = c === "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}

/**
 * ローディングステータスを管理するストア
 *
 * 処理中のプロセスが存在する場合にローディングオーバーレイを表示
 */
export const useLoadingStatusStore = defineStore("loadingStatus", {
  state: () => ({
    processIds: new Set(),
  }),

  actions: {
    /**
     * プロセスを登録して識別子を返します。
     * @returns 登録されたプロセスに割り当てられた識別子
     */
    insertProcess() {
      const id = safeUUID();
      this.processIds.add(id);
      return id;
    },

    /**
     * 指定されたプロセスの登録を解除します。
     * @param {string} id - 登録を解除するプロセスの識別子
     */
    removeProcess(id) {
      if (!this.processIds.has(id)) {
        throw new Error("未登録の識別子です。");
      }
      this.processIds.delete(id);
    },
  },

  getters: {
    /**
     * 処理中のプロセスが存在するかどうかを返します。
     * @returns {boolean} 処理中のプロセスが存在する場合は true
     */
    isLoading: (state) => state.processIds.size > 0,
  },
});

loadingStatus.ts

import { defineStore } from "pinia";

/** UUIDを安全に生成する関数（古い環境対応） */
function safeUUID(): string {
  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
    return crypto.randomUUID();
  }
  // fallback（古いブラウザやNode用）
  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
    const r = (Math.random() * 16) | 0;
    const v = c === "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}

/**
 * ローディングステータスを管理するストア
 *
 * 処理中のプロセスが存在する場合にローディングオーバーレイを表示
 */
export const useLoadingStatusStore = defineStore("loadingStatus", {
  state: () => ({
    processIds: new Set<string>(),
  }),

  actions: {
    /**
     * プロセスを登録して識別子を返します。
     * @returns 登録されたプロセスに割り当てられたプロセスの識別子
     */
    insertProcess(): string {
      const id = safeUUID(); // ✅ 変更点
      this.processIds.add(id);
      return id;
    },

    /**
     * 指定されたプロセスの登録を解除します。
     * @param id 登録を解除するプロセスの識別子
     */
    removeProcess(id: string) {
      if (!this.processIds.has(id)) {
        throw new Error("未登録の識別子です。");
      }

      this.processIds.delete(id);
    },
  },

  getters: {
    /**
     * 処理中のプロセスが存在するかどうかを返します。
     * @returns 処理中のプロセスが存在する場合は true, 存在しない場合は false
     */
    isLoading: (state) => state.processIds.size > 0,
  },
});