Créer un toastService primeVue réutilisable

Question

Je me demandais s'il existe un moyen de créer des scripts/classes/services réutilisables avec des appels de fonction primevue toast afin de ne pas avoir besoin d'appeler la fonction toast primevue directement dans chaque composant.

Ce que j'ai essayé de faire jusqu'à présent, c'est de créer un ToastService.ts comme ceci :

import { useToast } from 'primevue/usetoast';

    const toast = useToast();

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

Mais ce code fait planter mon application avec l'erreur suivante :

Erreur non détectée : useToast ne fournit pas PrimeVue Toast ! (usetoast.esm.js?18cb:8:1) évaluation (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) Modules../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/eslint- chargeur/index.js ? ! ./src/views/cadastro-plano/CadastroPlano.ts?

Est-ce que quelqu'un sait comment résoudre ce problème ou créer une fonction qui appelle cet add() afin que je n'aie pas besoin de l'appeler à chaque fois ?

Answer 1

Peut-être que la solution suivante vous convient :

Ajoutez Toast dans App.vue et ajoutez une montre pour vérifier les messages du magasin

sssccc

Boutique

import { createStore } from "vuex";

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

Ensuite, dans n'importe quel autre composant, mettez simplement à jour le message

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

Answer 2

Cette solution a fonctionné pour moi, mais je ne suis pas sûr que ce soit une bonne solution.

Première : exportez l'application depuis 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')

Deuxième : importez l'application et utilisez le service toast de 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});
};

Troisième : importez myToastService dans le composant.

// myTestToastComponent.vue
sssccc