Estoy usando la biblioteca de componentes de PrimeVue e intento llamar a useToast() desde dentro de mi propia función de composición personalizada, pero me arroja este error:
[Vue warn]: inject() solo se puede usar dentro de setup() o componentes funcionales.
Aquí está mi función de composición:
import axios from 'axios' import { useToast } from 'primevue/usetoast' export function useAxiosInterceptors() { const addResponseInterceptors = () => { axios.interceptors.response.use( (error) => { if (error.response?.status == 401) { showErrorToast( 'Session expired', 'It looks like you do not have a valid access token.' ) return Promise.reject(error) } ) } const showErrorToast = (summary, detail) => { const toast = useToast() // <-------- this causes the error toast.add({ severity: 'error', summary: summary, detail: detail, life: 3000 }) } return { addResponseInterceptors } } Uso esta función de composición en mi archivo main.ts
import { useAxios } from '@/services/useAxios' const { configureAxios } = useAxios() configureAxios()use composables están destinados principalmente para ser utilizados directamente dentro de la función setup . Es posible usar algunos de ellos en el exterior, pero esto se decide según el caso según los componentes internos componibles.
El error significa que este parece usar provide/inject y, por lo tanto, está destinado a usarse estrictamente dentro de la jerarquía de componentes, y es incorrecto usarlo en cualquier otro lugar. Dado que los brindis se muestran mediante el componente Toast , se debe crear una instancia de la aplicación de cualquier forma para poder hacer esto.
En este caso, el interceptor Axios podría configurarse dentro de un componente lo antes posible, es decir, dentro de la función de setup del componente raíz.