Vue3 - 如何從任何組件 / axios / Pinia 調用 App.vue 上的函數

Question

我有一個關於 vue3 編碼結構的問題，想知道實現以下目標的最佳方法。

存儲庫： https ://github.com/TraitOtaku/crudapp-vue3

Office.vue ：要加載主要的 Office 視圖（頁面），從 API 獲取 office 數據並存儲在 office.js（Pinia）中

OfficeForm.vue ：Office 數據的 CRUD 表單模板。 單擊確定按鈕將更新數據。 如果 Axios 返回成功，我還想觸發 popup(toast)。

office.js :Pinia 文件，用於存儲 Axios 獲取的 office 數據

https://github.com/TraitOtaku/crudapp-vue3/blob/master/src/views/admin-views/team/Office.vue https://github.com/TraitOtaku/crudapp-vue3/blob/master/src /components/layout-ui/form/member/OfficeForm.vue

我使用這個 PrimeVue UI 庫 ( https://primefaces.org/primevue/toast ) 並希望從任何組件調用 Toast 彈出窗口。

目標：我有這個來自 App.vue 上App.vue UI 庫的 toast 組件

<template>
  <LayoutView></LayoutView>

  <!-- POP UP MESSAGE -->
  <Toast position="bottom-left" />
</template>

在 App.vue <script setup>中：

const showSuccess = () => {
  toast.add({
    severity: "success",
    summary: "Success Message",
    detail: "Message Content",
    life: 3000,
  });
};

const showError = () => {
  toast.add({
    severity: "warn",
    summary: "Error Occurred",
    detail: "Something went wrong",
    life: 3000,
  });
};

問題：如何從任何子組件調用 showSuccess() 和 showError()？

我的想法 1：使用 Provide/Inject 並將 showSuccess() 和 showError() 發送到 Pania 商店並在 Axios 響應后調用每個函數。 -> 似乎很難在 .js 文件中實現注入（）。

我的想法2：使用$root$emit 調用App.vue 的showSuccess() 和showError()。 -> 我不知道如何從 App.vue 文件中接收 emmited $root$emit。

我的想法3：當Axios返回成功時存儲值（ig createdData = ref(0) ）和createdData++。 在 App.vue 文件中創建一個 watcher 並在 createdData.value 更改時調用 showSuccess()

注意：我只是不想重復這個 Vue 應用程序中隨處可見的組件。

請指教。 謝謝！

Answer 1

只需我添加了 toast 功能，它就起作用了！

import { defineStore } from "pinia";
import { ref, toRaw, inject } from "vue";
import EventService from "@/plugins/EventService";
import { useToast } from "primevue/usetoast";

export const useOfficeStore = defineStore("office", () => {
  const toast = useToast();
  const data = ref(null);

  const getData = () => {
    EventService.getOffice()
      .then((response) => {
        data.value = response.data;
      })
      .catch((error) => {
        console.log("data:" + error);
        toast.add({
          severity: "warn",
          summary: "Network Error",
          detail: "Database connection error",
          life: 3000,
        });
      });
  };
  getData();

  const updateData = (formState, id) => {
    EventService.updateOffice(id, toRaw(formState))
      .then((response) => {
        console.log("Office Updated" + response.data);
        getData();
        toast.add({
          severity: "info",
          summary: "Data Created",
          detail: "Office Data was successfully updated",
          life: 3000,
        });
      })
      .catch((error) => {
        console.log(error);
        getData();
        toast.add({
          severity: "error",
          summary: "Error Occurred",
          detail: "Data was not updated",
          life: 3000,
        });
      });
  };

  return {
    data,
    getData,
    updateData,
  };
});