如何在Vue组合式API中不使用useContext访问$axios

方案1：利用Vue原生的Provide/Inject机制 #

这是最通用的适配方式，既能兼容纯Vue应用，也能无缝对接Nuxt的SSR场景。

1. 应用侧注册Axios实例

• 纯Vue应用：
  创建Axios实例后，在应用初始化阶段通过app.provide完成注入：

  import { createApp } from 'vue'
  import axios from 'axios'
  import App from './App.vue'
  
  const axiosInstance = axios.create({
    baseURL: 'https://api.example.com'
  })
  
  const app = createApp(App)
  app.provide('axios', axiosInstance) // 注入key为"axios"的实例
  app.mount('#app')
  

• Nuxt应用：
  通过Nuxt插件把自带的$axios（或自定义Axios实例）注入到应用中，自动继承Nuxt的服务端调用能力：

  // plugins/axios-provider.ts
  export default defineNuxtPlugin((nuxtApp) => {
    // 复用Nuxt内置的$axios，原生支持SSR
    nuxtApp.provide('axios', nuxtApp.$axios)
  })
  

  记得在nuxt.config.ts中注册该插件，确保它能被正确加载。

2. 类库中获取Axios实例

在你的类库组合式函数里，直接用inject获取实例即可，完全不依赖Nuxt的useContext：

import { inject } from 'vue'
import type { AxiosInstance } from 'axios'

export function useMyLibraryApi() {
  const axios = inject<AxiosInstance>('axios')
  if (!axios) {
    throw new Error('请先在应用侧通过app.provide注入Axios实例！')
  }

  // 封装你的业务API，示例：
  const fetchUserInfo = async (userId: number) => {
    const res = await axios.get(`/users/${userId}`)
    return res.data
  }

  return { fetchUserInfo }
}

方案2：支持手动传入Axios实例（增强灵活性） #

为了给用户更多选择，可以允许手动传入Axios实例作为参数，作为inject的备选方案：

import { inject } from 'vue'
import type { AxiosInstance } from 'axios'

export function useMyLibraryApi(customAxios?: AxiosInstance) {
  const axios = customAxios || inject<AxiosInstance>('axios')
  if (!axios) {
    throw new Error('请传入自定义Axios实例，或在应用侧provide "axios"！')
  }

  // 业务逻辑同上
}

用户使用时可以这样操作：

// 手动传入自定义实例
import axios from 'axios'
const customAxios = axios.create({ baseURL: 'https://api.another.com' })
const { fetchUserInfo } = useMyLibraryApi(customAxios)

Nuxt服务端调用说明 #

在Nuxt应用中使用时，只要在Nuxt的SSR友好钩子（比如useAsyncData、serverPrefetch）里调用类库的API，就能自动触发服务端请求——因为注入的axios是Nuxt的$axios实例，已经内置了SSR适配，会自动处理服务端的请求上下文。

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