Ich habe mich gefragt, ob es eine Möglichkeit gibt, wiederverwendbare Skripte/Klassen/Dienste mit Primevue-Toast-Funktionsaufrufen zu erstellen, sodass ich die Primevue-Toast-Funktion nicht direkt in jeder Komponente aufrufen muss. p>
Was ich bisher versucht habe, ist ein ToastService.ts wie folgt zu erstellen:
import { useToast } from 'primevue/usetoast'; const toast = useToast(); export function addMsgSuccess(): void { toast.add({ severity: 'success', summary: 'Test', detail: 'Test', life: 3000 }); }
Aber dieser Code lässt meine App mit der folgenden Fehlermeldung abstürzen:
Nicht erfasster Fehler: useToast bietet kein 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) Module../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?
Weiß jemand, wie man das beheben oder eine Funktion erstellen kann, die diesen add()-Aufruf durchführt, damit ich ihn nicht jedes Mal aufrufen muss?
也许以下解决方案适合您:
在App.vue中添加Toast并添加一个检查来自商店的消息的手表
商店
然后,在任何其他组件中只需更新消息
这个解决方案对我有用,但我不确定这是一个好的解决方案。
第一:从 main.ts 导出应用程序
第二:导入应用程序并使用
app.config.globalProperties
的 toast 服务第三:在组件中导入 myToastService。