Vue 组合 API 使用 VueAxios？

Question

我在main.js中导入vue-axios

main.js

import { createApp } from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import App from './App.vue';

const app = createApp(App);

app.use(VueAxios, axios);
app.mount('#app');

和App.vue

export default {
  name: 'App',
  setup() {
   axios.get('xxxx').then((res) => {console.log(res)}); // is not working
  }
};

但似乎Vue合成API设置无法获取axios？那么它必须在 App.vue 中使用吗import axios from 'axios'？

import axios from 'axios';
 
export default {
  name: 'App',
  setup() {
   axios.get('xxxx').then((res) => {console.log(res)});
  }
};

我的环境是vite

Answer 1

通常我会做这样的事情（除了我将所有 api 调用模块化为“服务”而不是将其内联到视图代码中。）

import axios from 'axios';
import {onMounted} from 'vue'
 
export default {
  name: 'App',
  setup() {

   onMounted(async () => {
     let res = await axios.get('xxxx')
     console.log(res)
   });
  }
};