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)
   });
  }
};

Answer 2

如果沒有導入，這在任何版本的 Vue 中都不起作用：

axios.get(...)

即使在 Vue 2 中，如果你使用 vue-axios，你也必須使用其中之一：

this.axios.get(...)
this.$http.get(...)
Vue.axios.get(...)

組合 API 在組件中沒有this訪問權限，所以vue-axios沒有多大幫助。