搜尋

首頁  >  問答  >  主體

建立一個可重複使用的 primeVue 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 });
    }

但是這段程式碼使我的應用程式崩潰,並且出現以下錯誤:

未捕獲錯誤:useToast 未提供 PrimeVue Toast! (usetoast.esm.js?18cb:8:1) eval (ToastService.ts?73ba:3:1) 模組../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-modules/eslint-modules loader/index.js? ! ./src/views/cadastro-plano/CadastroPlano.ts?

有誰知道如何解決這個問題,或建立進行此 add() 呼叫的函數,這樣我就不需要每次都呼叫它?

P粉617237727P粉617237727327 天前728

全部回覆(2)我來回復

  • P粉343408929

    P粉3434089292024-03-20 14:20:56

    也許以下解決方案適合您:

    在App.vue中加入Toast並新增一個檢查來自商店的訊息的手錶

    
    

    商店

    import { createStore } 從 "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);

    回覆
    0
  • P粉019353247

    P粉0193532472024-03-20 09:19:55

    這個解決方案對我有用,但我不確定這是一個好的解決方案。

    第一:從 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 的 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
    

    回覆
    0
  • 取消回覆