재사용 가능한 primeVue toastService 만들기

Question

모든 구성 요소에서 primevue toast 함수를 직접 호출할 필요가 없도록 primevue toast 함수 호출로 재사용 가능한 스크립트/클래스/서비스를 만드는 방법이 있는지 궁금합니다.

지금까지 제가 시도한 것은 다음과 같이 ToastService.ts를 만드는 것이었습니다:

으아악

그러나 이 코드는 다음 오류로 인해 내 앱과 충돌합니다.

잡히지 않은 오류: useToast는 PrimeVue Toast를 제공하지 않습니다! (usetoast.esm.js?18cb:8:1) 평가(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- 로더/index.js? ! ./src/views/cadastro-plano/CadastroPlano.ts?

이 문제를 해결하는 방법을 아는 사람이 있나요? 아니면 매번 호출할 필요가 없도록 add() 호출을 수행하는 함수를 만드는 방법을 아는 사람이 있나요?

Answer 1

아마도 다음 솔루션이 귀하에게 적합할 것입니다:

App.vue에 토스트를 추가하고 시계를 추가하여 스토어에서 보낸 메시지를 확인하세요

으아아아

쇼핑

으아아아

그런 다음 다른 구성요소에서 메시지를 업데이트하세요

으아아아

Answer 2

이 솔루션은 저에게 효과적이었지만 좋은 솔루션인지는 확실하지 않습니다.

먼저: main.ts에서 애플리케이션 내보내기

으아악

두 번째: 애플리케이션을 가져오고 app.config.globalProperties토스트 서비스를 사용하세요

으아악

세 번째: 구성 요소에서 myToastService를 가져옵니다.

으아악