如何在Vue组件外（如Axios拦截器）使用PrimeVue的ToastService？

核心思路 #

PrimeVue注册ToastService后，会在Vue应用实例的全局属性中暴露$toast实例，我们可以将这个实例单独导出，供组件外的代码直接调用，绕开Composition API只能在组件内部使用的限制。

步骤1：修改main.ts导出Toast实例 #

调整你的main.ts，在应用挂载后提取并导出全局的Toast服务实例：

// Core
import { createApp } from "vue";
import App from "@/App.vue";

// Styles
import "primevue/resources/themes/lara-dark-blue/theme.css";
import "primeflex/primeflex.css";
import "primeicons/primeicons.css";

// Plugins
import PrimeVue from "primevue/config";
import ToastService from "primevue/toastservice";

const app = createApp(App);

app.use(PrimeVue, { ripple: true });
app.use(ToastService);

// 导出全局Toast实例
export const toast = app.config.globalProperties.$toast;

app.mount("#app");

步骤2：在Axios拦截器中使用导出的Toast实例 #

修改plugin/axios.ts，直接导入刚才导出的toast实例，替代原有的useToast()调用：

import axios, { AxiosError } from "axios";
// 导入全局Toast实例
import { toast } from "@/main";

// Set default axios parameters
const instance = axios.create({
    baseURL: import.meta.env.VITE_API_BASE_URL,
});

instance.interceptors.response.use(
    (response) => response,
    (error: AxiosError) => {
        if (error.response?.status === 401) {
            toast.add({ summary: "Unauthenticated", severity: "error", life: 3000 });
        } else if (error.response?.status === 403) {
            toast.add({ summary: "Forbidden", severity: "error", life: 3000 });
        }
        // 始终返回rejected状态的Promise，避免请求逻辑挂起
        return Promise.reject(error);
    }
);

export default instance;

额外说明（TypeScript项目适配） #

如果你的项目使用TypeScript，为了避免类型报错，可在src/env.d.ts中添加类型声明：

import type { ToastService } from "primevue/toastservice";

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $toast: ToastService;
  }
}

内容的提问来源于stack exchange，提问作者Tough Stick