我正在使用 PrimeVue
组件库,我尝试从我自己的自定义组合函数中调用 useToast()
,但它抛出了这个错误:
[Vue warn]: inject() can only be used inside setup() or functional components.
这是我的组合函数:
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 }
}
我在我的 main.ts
文件中使用了这个组合函数。
import { useAxios } from '@/services/useAxios'
const { configureAxios } = useAxios()
configureAxios()
最佳答案
use
可组合项主要旨在直接在 setup
函数中使用。可以在外部使用其中一些,但这取决于可组合的内部结构,具体情况视具体情况而定。
这个错误意味着这个似乎使用了 provide/inject 并且因此打算严格地在组件层次结构中使用,并且在其他任何地方使用它都是不正确的。由于 toasts 由 Toast
组件显示,因此应以任何方式实例化应用程序以执行此操作。
在这种情况下,Axios 拦截器可以尽快设置在组件内部,即在根组件的 setup
函数内部。
关于javascript - Vue 3 - inject() 只能在 setup() 或功能组件内部使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71883241/