Quería usar el componente Toast de la biblioteca PrimeVue y también quería crear un buen servicio reutilizable para él, pero recibo este error. Esto no parece ser un problema si no trato de extraer un servicio separado para la notificación Toast.
Pero quiero llamar a useToast() desde dentro de mi servicio personalizado y no directamente en la función de setup del componente.
Estoy usando Vue 3.2.25 con Vite.js 2.9.9 y la última versión de PrimeVue
[Vue warn]: inject() can only be used inside setup() or functional components. [Vue warn]: Unhandled error during execution of native event handler at <App> Uncaught Error: No PrimeVue Toast provided! at useToast (usetoast.esm.js:8:15) at Proxy.showToast (toastService.js:4:19) at _createElementVNode.onClick._cache.<computed>._cache.<computed> (App.vue:4:21) at callWithErrorHandling (runtime-core.esm-bundler.js:155:22) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21) at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:369:13)Aquí hay un enlace de CodeSandbox: https://codesandbox.io/s/prime-vue-toast-issue-owcio8?file=/src/services/toastService.js
Aquí está mi main.js
import App from './App.vue' import { createApp } from 'vue' import PrimeVue from 'primevue/config'; import 'primevue/resources/primevue.min.css'; import 'primevue/resources/themes/lara-dark-blue/theme.css'; import ToastService from 'primevue/toastservice'; const app = createApp(App); app.use(PrimeVue); app.use(ToastService); app.mount('#app')Y aquí está mi App.vue
<template> <Toast /> <button @click="showToast">Show toast!</button> </template> <script setup> import Toast from 'primevue/toast'; import { showToast } from './services/toastService'; </script>y aquí está mi servicio de tostadas.js:
import { useToast } from "primevue/usetoast"; const showToast = () => { const toast = useToast(); toast.add({ severity: 'info', detail:'Hello' }); } export { showToast }Se supone que los componibles de Vue se usan principalmente directamente en la función de configuración, cuando se crea la instancia del componente. Algunos de ellos se pueden usar en otros lugares, pero esto depende de la implementación de un componible y debe confirmarse adicionalmente.
El error sugiere que useToast usa inject internamente, esto restringe el uso de este componible.
Para un servicio reutilizable, puede ser:
import { useToast } from "primevue/usetoast"; export const useToastService = () => { const toast = useToast(); const showToast = () => { toast.add({ severity: 'info', detail:'Hello' }); } return { showToast }; };Y usado como:
const { showToast } = useToastService(); Nada en la implementación de PrimeVue Toast realmente requiere usar useToast componible, es un ayudante de conveniencia; ver esto y esto . Con cierto riesgo de refactorizar el servicio de brindis en la próxima actualización importante de la biblioteca, podría simplificarse usando:
import ToastEventBus from 'primevue/toasteventbus'; export const useToastService = () => { const showToast = () => { ToastEventBus.emit('add', { severity: 'info', detail:'Hello' }); } return { showToast }; };De esta manera, el servicio podría usarse con cierta discreción en cualquier lugar de la aplicación, por ejemplo, en un enrutador.