vue中setup语法糖+ts使得全局配置axios失效

Question

vue3中使用setup语法糖+ts为啥使得全局配置axios失效呀，忽略ts全局配置能起作用，添加ts提示我找不到axios，需要我在该组件局部重新再次引入，否则控制台提示axios没有被定义。另外依赖我是同时安装了axios和vue-axios的

main.ts代码

// 导入vue-axios模块
import VueAxios from 'vue-axios'
import axios from 'axios';
app.use(VueAxios, axios)
...

header.vue

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
//需要重新导入axios，否则提示我函数内的axios找不到，去掉下面这句话就报错，或者忽略ts语法
import axios from 'axios';
// 调用名人名言接口
const text = ref('')
function FamousQuotes() {
  let api = `/api/mingyan?token=wPsstR6XUhVezM8Y&format=json&typeid=1`
  axios
    .get(api)
    .then((res: any) => {
      // console.log(res.data)
      text.value = res.data.data.content
      console.log(text.value)
    })
}
onMounted(() => {
  axios.defaults.baseURL = '/api'
  FamousQuotes()
})
</script>

问题就是需要局部导入，可是按理来说全局配置axios应该是可以直接使用的呀！并且我不想忽视ts语法，因为其他的业务逻辑也会受到影响

想知道有什么办法可以直接使全局配置axios在ts语法下生效，尝试过app.config.globalProperties.$axios=Axios;和let { proxy } = getCurrentInstance();但好像也不起作用，求各位解答

Answer 1

文档里说的挺清楚的，如果要在setup中使用，需要使用provide进行全局注入，然后在setup中使用inject进行提取。
https://github.com/imcvampire/vue-axios

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App).use(store)
app.use(VueAxios, axios)
app.provide('axios', app.config.globalProperties.axios)  // provide 'axios'
app.mount('#app')

// App.vue
import { inject } from 'vue'

export default {
  name: 'Comp',
  setup() {
    const axios: any = inject('axios')  // inject axios

    const getList = (): void => {
      axios
        .get(api)
        .then((response: { data: any }) => {
          console.log(response.data)
        });
    };

    return { getList }
  }
}