piniaのようなStoreを使いアクションを作成する

もし、あなたのプロジェクトでpiniaを使用している場合、Storeを使いグローバル関数を作成することができます。

ストアサンプル

初めに、vue-confirm用のStoreを作成します。

// src/store/vconfirm.ts
import { defineStore } from "pinia";

import type { VConfirmProps } from "@gn5r/vue-confirm";

interface State extends VConfirmProps {}

export const useVConfirmStore = defineStore("vconfirm", {
  state: (): State => ({
    btnAlign: "end",
    btns: [],
    closeable: false,
    dark: false,
    hideHeader: false,
    message: "",
    modelValue: false,
    noActionsDivider: false,
    persistent: false,
    title: "",
    titleColor: "",
    titleTextColor: "",
    width: 800,
  }),
  actions: {
    confirm(message?: string): Promise<boolean> {
      return new Promise<boolean>((resolve) => {
        if (message) this.message = message;
        this.title = "確認";
        this.titleColor = "#2196f3";
        this.titleTextColor = "#ffffff";
        this.btns = [
          {
            text: "はい",
            textColor: "#ffffff",
            color: "#2196F3",
            onClick: () => {
              this.modelValue = false;
              return resolve(true);
            },
          },
          {
            text: "いいえ",
            onClick: () => {
              this.modelValue = false;
              return resolve(false);
            },
          },
        ];
        this.modelValue = true;
      });
    },
  },
});

App.vueでv-confirmを定義する

次に、App.vueのようなトップレベルのVueコンポーネントにv-confirmを定義します。

<!-- App.vue -->
<template>
  <v-confirm
    v-model="config.modelValue"
    :btn-align="config.btnAlign"
    :btns="config.btns"
    :closeable="config.closeable"
    :dark="config.dark"
    :hide-header="config.hideHeader"
    :message="config.message"
    :no-actions-divider="config.noActionsDivider"
    :persistent="config.persistent"
    :title="config.title"
    :title-color="config.titleColor"
    :title-text-color="config.titleTextColor"
    :width="config.width"
  />
</template>
<script setup lang="ts">
import VConfirm from "@gn5r/vue-confirm";
import { useVConfirmStore } from "@/store/vconfirm";

const config = useVConfirmStore();
</script>

アクションの使い方

Storeで定義したアクションは次のように使用できます。

<!-- Child.vue -->
<template>
  <div>
    <!-- some DOMs... -->
    <button @click="submit">confirm</button>
  </div>
</template>
<script setup lang="ts">
import { useVConfirmStore } from "@/store/vconfirm";

const vconfirm = useVConfirmStore();

async function submit() {
  if (await vconfirm.confirm("Confirm submission?")) {
    // 「はい」ボタンをクリックした時の処理を記述
  } else {
    // 「いいえ」ボタンをクリックした時の処理を記述
  }
}
</script>