typescript - 如何使用 primeVue toast 创建可重用的 toastService？

Question

我想知道是否有一种方法可以通过 primevue toast 函数调用创建可重用的脚本/类/服务，这样我就不需要在每个组件中直接调用 primevue toast 函数。

到目前为止，我一直在尝试创建一个 ToastService.ts，如下所示:

import { useToast } from 'primevue/usetoast';

    const toast = useToast();

    export function addMsgSuccess(): void {
        toast.add({ severity: 'success', summary: 'Test', detail: 'Test', life: 3000 });
    }

但是这段代码使我的应用程序崩溃并且出现以下错误:

Uncaught Error: No PrimeVue Toast provided!at useToast(usetoast.esm.js?18cb:8:1) eval (ToastService.ts?73ba:3:1)Module../src/shared/service/ToastService.ts (app.js:1864:1)webpack_require (app.js:849:30) fn (app.js:151:20) eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/eslint-loader/index.js?!./src/views/cadastro-plano/CadastroPlano.ts?vue&type=script&lang=ts:31:87)Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/eslint-loader/index.js?!./src/views/cadastro-plano/CadastroPlano.ts?

有谁知道如何解决这个问题，或者创建调用 add() 的函数，这样我就不需要每次都调用它了？

Answer 1

也许以下解决方案适合您:

在 App.vue 中添加一个 Toast 并添加一个 watch 来检查来自商店的消息

<template>
  <router-view />
  <Toast position="bottom-right" group="br" />
</template>
<script>
import { watch } from "vue";
import { useStore } from "vuex";
import { useToast } from "primevue/usetoast";
export default {
  setup() {
   const store = useStore();
   const toast = useToast();

    watch(
      () => store.getters.getErrorMessage,
       (message, prevMessage) => {
        console.log("error message", message);
        if (message) {
          toast.add({
            severity: "error",
            summary: "Error",
            detail: message,
            group: "br",
            life: 6000,
          });
        }
      }
    );
  },
};
</script>

商店

import { createStore } from "vuex";

export default createStore({
    state: { errorMessage: "" },
    mutations: {        
        setErrorMessage(state, payload) {
            state.errorMessage = payload;
        },
    },
    actions: {},
    modules: {},
    getters: {   
            getErrorMessage: (state) => state.errorMessage,
    },
});

然后，在任何其他组件中只更新消息

store.commit("setErrorMessage", error.message);