javascript - Vue 3 - inject() 只能在 setup() 或功能组件内部使用

Question

我正在使用 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()

Answer 1

use 可组合项主要旨在直接在 setup 函数中使用。可以在外部使用其中一些，但这取决于可组合的内部结构，具体情况视具体情况而定。

这个错误意味着这个似乎使用了 provide/inject 并且因此打算严格地在组件层次结构中使用，并且在其他任何地方使用它都是不正确的。由于 toasts 由 Toast 组件显示，因此应以任何方式实例化应用程序以执行此操作。

在这种情况下，Axios 拦截器可以尽快设置在组件内部，即在根组件的 setup 函数内部。