Buat primeVue toastService yang boleh diguna semula

Question

Saya tertanya-tanya sama ada terdapat cara untuk mencipta skrip/kelas/perkhidmatan boleh guna semula dengan panggilan fungsi toast primevue supaya saya tidak perlu memanggil fungsi toast primevue secara langsung dalam setiap komponen.

Apa yang saya cuba lakukan setakat ini ialah mencipta ToastService.ts seperti ini:

import { useToast } from 'primevue/usetoast';

    const toast = useToast();

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

Tetapi kod ini merosakkan apl saya dengan ralat berikut:

Ralat Tidak Ditangkap: useToast tidak menyediakan PrimeVue Toast! (usetoast.esm.js?18cb:8:1) eval (ToastService.ts?73ba:3:1) Modul ../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) Modul../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?

Adakah sesiapa tahu cara untuk membetulkannya, atau mencipta fungsi yang membuat panggilan add() ini jadi saya tidak perlu memanggilnya setiap kali?

Answer 1

Mungkin penyelesaian berikut sesuai untuk anda:

Tambah Roti Bakar dalam App.vue dan tambah jam tangan untuk menyemak mesej daripada kedai

sssccc

Beli

import { createStore } from "vuex";

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

Kemudian, dalam mana-mana komponen lain hanya kemas kini mesej

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

Answer 2

Penyelesaian ini berkesan untuk saya, tetapi saya tidak pasti ia penyelesaian yang baik.

Pertama: Eksport aplikasi daripada 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')

Kedua: Import aplikasi dan gunakan perkhidmatan roti bakar 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});
};

Ketiga: Import myToastService dalam komponen.

// myTestToastComponent.vue
sssccc