问题:如何使用 primeVue toast 创建可重用的 toastService?

我想知道是否有办法使用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 });
    }

但是这段代码使我的应用程序崩溃,我收到以下错误:

未捕获的错误:未提供 PrimeVue Toast!在 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&typeu003dscript&langu003dts: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() 调用的函数,所以我不需要每次都调用它?

解答

该解决方案对我有用,但我不确定它是否是一个好的解决方案。

第一:从 main.ts 导出应用

// main.ts
import {createApp} from 'vue';
import App from '@/App.vue';

import PrimeVue from 'primevue/config';
import ToastService from 'primevue/toastservice';

export const app = createApp(App);

app.use(PrimeVue);
app.use(ToastService);

app.mount('#app')

二:使用app.config.globalProperties导入app并使用toast服务

// myToastService.ts
import {ToastSeverity} from 'primevue/api';
import {app} from '@/main';

const lifeTime = 3000;

export function info(title: string = 'I am title', body: string = 'I am body'): void {
  app.config.globalProperties.$toast.add({severity: ToastSeverity.INFO, summary: title, detail: body, life: lifeTime});
};

export function error(title: string = 'I am title', body: string = 'I am body'): void {
  app.config.globalProperties.$toast.add({severity: ToastSeverity.ERROR, summary: title, detail: body, life: lifeTime});
};

第三:在您的组件中导入 myToastService。

// myTestToastComponent.vue
<script setup lang="ts">
import {info, error} from '@/components/myToastService';

info();
</script>