如何在Vue组合式API（Composition API）中全局使用Axios？

你已经通过插件将Axios实例挂载到全局属性，但组合式API的setup()中无法使用this，可以用以下几种方式解决：

方案一：通过getCurrentInstance获取全局Axios #

Vue提供的getCurrentInstance方法可获取当前组件实例，借此能访问到全局挂载的Axios：

import { getCurrentInstance } from 'vue'

export default {
  setup() {
    const instance = getCurrentInstance()
    // 生产环境建议用appContext获取，避免ctx被代理导致的问题
    const axios = instance.appContext.config.globalProperties.axios

    // 示例：发起请求
    const fetchData = async () => {
      const res = await axios.get('/api/data')
      console.log(res)
    }

    return { fetchData }
  }
}

方案二：改造插件，直接导出Axios实例 #

修改/plugins/axios.js，创建实例后同时导出，组件可直接导入使用，无需依赖全局属性：

import axios from 'axios'

// 创建Axios实例
let axiosInstance = null

export default {
  install: (app, options) => {
    axiosInstance = axios.create({
      baseURL: options.baseUrl,
      withCredentials: true,
      headers: {
        Authorization: options.token ? `Bearer ${options.token}` : '',
      }
    })
    app.config.globalProperties.axios = axiosInstance
  }
}

// 导出实例，供组件直接导入
export { axiosInstance as axios }

组件中直接导入使用：

import { axios } from '@/plugins/axios'

export default {
  setup() {
    const fetchData = async () => {
      const res = await axios.get('/api/data')
      console.log(res)
    }

    return { fetchData }
  }
}

方案三：使用Provide/Inject注入Axios（推荐） #

这是Vue官方推荐的跨组件传递依赖的方式，比全局属性更符合组合式API的设计：
修改/plugins/axios.js，在install方法中通过app.provide提供Axios实例：

import axios from 'axios'

export default {
  install: (app, options) => {
    const axiosInstance = axios.create({
      baseURL: options.baseUrl,
      withCredentials: true,
      headers: {
        Authorization: options.token ? `Bearer ${options.token}` : '',
      }
    })
    // 提供Axios实例，指定注入的key为'axios'
    app.provide('axios', axiosInstance)
    app.config.globalProperties.axios = axiosInstance // 保留全局属性兼容选项式API
  }
}

组件中通过inject获取：

import { inject } from 'vue'

export default {
  setup() {
    const axios = inject('axios')

    const fetchData = async () => {
      const res = await axios.get('/api/data')
      console.log(res)
    }

    return { fetchData }
  }
}

内容的提问来源于stack exchange，提问作者Dally