1，问题

有一个全局错误弹窗，当项目中有接口报错时，会显示错误信息。

思路：在 axios 的响应拦截器中，满足条件后打开错误弹窗。

问题：如何在 js 文件（axios）中，向 vue 文件（错误弹窗）传参，而且是响应式的？

2，单一状态管理

vue -状态管理

一个比较容器想到的方式——状态管理器 Vuex 或 Pinia。借鉴这个思路，可以通过自定义一个全局单例来实现。

目录

-- api-- index.js
-- component-- dialogError-- index.vue-- useError.js

实现

1，dialogError/useError.js 实现单例。

import { ref } from 'vue'// error 专属单例
const errorRef = ref(null)export default errorRef

2，api/index.js 单例赋值。

import axios from 'axios'
import errorRef from '@/components/dialogError/useError'axios.interceptors.request.use(// ...
)axios.interceptors.response.use(function (response) {if (response.data.responseCode === '00000') {return response.data// 接口报错  } else {if (location.pathname !== '/error.html') {// 防止因为多个接口，多次执行if (!errorRef.value) {errorRef.value = response.data}} else {return response.data}}},function (error) {return Promise.reject(error)}
)export default axios

3，dialogError/index.vue 单例使用。

<template><Dialog :show="visible"><div>({{ errorRef }})</div><div @click="handleClose">关闭</div></Dialog>
</template><script setup>
import { ref, watch } from 'vue'
import Dialog from '../Dialog.vue'
import errorRef from './useError'const visible = ref(false)
watch(() => errorRef.value,(nv) => {visible.value = !!nv}
)const handleClose = () => {visible.value = false
}
</script>

以上。