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

Question

すべてのコンポーネントで primevue トースト関数を直接呼び出す必要がないように、primevue トースト関数呼び出しを使用して再利用可能なスクリプト/クラス/サービスを作成する方法があるかどうか疑問に思っていました。

これまでにやろうとしたことは、次のような ToastService.ts を作成することです:

import { useToast } から 'primevue/usetoast';

    const トースト = useToast();

    エクスポート関数 addMsgSuccess(): void {
        トースト.add({ 重大度: '成功'、概要: 'テスト'、詳細: 'テスト'、ライフ: 3000 });
    }

しかし、このコードは次のエラーでアプリをクラッシュさせます:

キャッチされないエラー: useToast PrimeVue トーストが提供されていません! (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-ローダー/インデックス.js? ！ ./src/views/cadastro-plano/CadastroPlano.ts?

これを修正する方法、または毎回呼び出す必要がないようにこの add() 呼び出しを行う関数を作成する方法を知っている人はいますか?

Answer 1

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

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

＃＃＃店＃＃＃

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

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

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

Answer 2

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

最初: 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