Vue3 中使用 Axios 的完整指南

Axios 是一个流行的 HTTP 客户端库，可以方便地在 JavaScript 应用中发送 HTTP 请求。在本指南中，我们将学习如何在 Vue3 项目中配置和使用 Axios。

1. 安装 Axios

使用 npm 安装 Axios：

npm install axios

2. 在 Vue3 中使用 Axios

在 Vue3 中，我们可以使用 provide 和 inject 来全局注入 Axios 实例，方便在整个应用中使用。

在 main.js 中，我们可以这样写：

import { createApp } from 'vue'
import axios from 'axios'
import App from './App.vue'

const app = createApp(App)

app.provide('axios', axios)

app.mount('#app')

这样，我们就在整个应用中注入了一个名为 axios 的实例。

3. 在组件中使用 Axios

在组件中，我们可以使用 inject 来获取全局注入的 Axios 实例。

export default {
  inject: ['axios'],
  data() {
    return {
      data: null
    }
  },
  mounted() {
    this.axios.get('/api/data').then(res => {
      this.data = res.data
    })
  }
}

这样，我们就可以在组件中使用 this.axios 来发起请求了。