再利用可能な primeVue トーストサービスを作成する

Question

すべてのコンポーネントで primevuetoast 関数を直接呼び出す必要がないように、primevuetoast 関数呼び出しを使用して再利用可能なスクリプト/クラス/サービスを作成する方法があるかどうか疑問に思っています。私がこれまでにやろうとしたことは、次のような ToastService.ts を作成することです: import{useToast}from'primevue/usetoast';consttoast=useToast();exportfunctionaddMsgSu

P粉343408929 · Answer

おそらく次の解決策があなたに適しています:

App.vue にトーストを追加し、ストアからのメッセージをチェックするウォッチを追加します

＃＃＃店＃＃＃

import { createStore } from "vuex"; デフォルトのエクスポート createStore({ 状態: { エラーメッセージ: "" }、突然変異: { setErrorMessage(状態, ペイロード) { state.errorMessage = ペイロード; }、 }、行動： {}、モジュール: {}、ゲッター: { getErrorMessage: (状態) => state.errorMessage, }、 });

その後、他のコンポーネントでメッセージを更新するだけです

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

P粉019353247 · Answer

この解決策は私にとってはうまくいきましたが、それが良い解決策であるかどうかはわかりません。

最初: main.ts からアプリケーションをエクスポートします

// main.ts
'vue' から {createApp} をインポートします。
「@/App.vue」からアプリをインポートします。

「primevue/config」から PrimeVue をインポートします。
「primevue/toastservice」から ToastService をインポートします。

エクスポート const app = createApp(App);

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

app.mount('#app')

2 番目: アプリケーションをインポートし、app.config.globalProperties

のトーストサービスを使用します。

// myToastService.ts
'primevue/api' から {ToastSeverity} をインポートします。
{app} を「@/main」からインポートします。

const lifeTime = 3000;

エクスポート関数 info(title: string = 'I am title', body: string = 'I am body'): void {
  app.config.globalProperties.$toast.add({重大度: ToastSeverity.INFO、概要: タイトル、詳細: 本文、ライフ: lifeTime});
};

エクスポート関数エラー(タイトル: 文字列 = '私はタイトル', 本文: 文字列 = '私は本文'): void {
  app.config.globalProperties.$toast.add({重大度: ToastSeverity.ERROR、概要: タイトル、詳細: 本文、ライフ: lifeTime});
};

3 番目: myToastService をコンポーネントにインポートします。

// myTestToastComponent.vue