如何使用 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 });
    }

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

未捕获错误：未提供 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&type=script&lang=ts:31:87) 模块。 ./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

这个解决方案对我有用，但我不确定它是一个好的解决方案。

第一：从 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')

第二：导入应用程序并使用toast服务app.config.globalProperties

// 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>

Answer 2

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

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

<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);

Answer 3

无需额外依赖或导入/导出应用程序的解决方案

它是更多的导入，但这样您就可以拥有合理的一致默认值。就我而言，从 main.js 导出任何内容都不是一个选项，因此如果没有额外的依赖项，这是我唯一的选择。

同一个班级

在 toastNotificationHelper.js 中：

import {ToastSeverity} from 'primevue/api';

export class toastService {
  constructor(toastInstanse, defaultLifeTime) {
    this.toastInstanse = toastInstanse
    this.defaultLifeTime = defaultLifeTime ? defaultLifeTime : "3000" 
  }
  displayInfo(title = 'Info', body = '', lifeTime = this.defaultLifeTime){
    this.toastInstanse.add({severity: ToastSeverity.INFO, summary: title, detail: body, life: lifeTime});
  }
}

在您的组件中：

import { useToast } from 'primevue/usetoast';
import { toastService } from "@/utilities/toastNotificationHelper.js";
const toastNotifications = new toastService(useToast())

onMounted(() => {
  toastNotifications.displayInfo()
});

有一个功能

在 toastNotificationHelper.js 中：

import {ToastSeverity} from 'primevue/api';

const defaultLifeTime = 3000;

export function toastInfoNotification(toastInstanse, title = 'Info', body = '', lifeTime = defaultLifeTime) {
    toastInstanse.add({severity: ToastSeverity.INFO, summary: title, detail: body, life: lifeTime});
};

在您的组件中：

import { toastInfoNotification } from "@/utilities/toastNotificationService.js";
import { useToast } from 'primevue/usetoast';
const toast = useToast();

onMounted(() => {
  toastInfoNotification(toast)
});