如何在Nuxt 2中结合@nuxtjs/composition-api使用@nuxtjs/axios

方法一：直接用useContext获取（最便捷） #

@nuxtjs/composition-api自带的useContext方法可以直接从Nuxt上下文取出$axios实例，完全不用依赖getCurrentInstance：

import { useContext } from '@nuxtjs/composition-api'

export default {
  setup() {
    const { $axios } = useContext()

    const fetchUser = async () => {
      const response = await $axios.get('/api/user')
      console.log(response.data)
    }

    return { fetchUser }
  }
}

方法二：封装成可复用Composable（适合多组件场景） #

如果多个组件都要调用axios，可以封装自定义Composable减少重复代码：

1. 创建composables/useAxios.js：

import { useContext } from '@nuxtjs/composition-api'

export default function useAxios() {
  const { $axios } = useContext()
  return $axios
}

2. 在组件中调用：

import useAxios from '~/composables/useAxios'

export default {
  setup() {
    const $axios = useAxios()

    const fetchPosts = async () => {
      const res = await $axios.get('/api/posts')
      return res.data
    }

    return { fetchPosts }
  }
}

方法三：全局注入（自定义上下文键） #

若偏好注入模式，可通过Nuxt插件配置全局注入：

1. 创建plugins/axios-inject.js：

import { provide, inject } from '@nuxtjs/composition-api'

const AXIOS_INJECT_KEY = Symbol('axios')

export default ({ $axios }) => {
  provide(AXIOS_INJECT_KEY, $axios)
}

export function useAxios() {
  const axios = inject(AXIOS_INJECT_KEY)
  if (!axios) {
    throw new Error('useAxios必须在Nuxt应用上下文内使用')
  }
  return axios
}

2. 在nuxt.config.js中注册插件（注意顺序）：

export default {
  plugins: [
    '@nuxtjs/axios',
    '@nuxtjs/composition-api',
    '~/plugins/axios-inject.js'
  ]
}

3. 组件内使用：

import { useAxios } from '~/plugins/axios-inject'

export default {
  setup() {
    const $axios = useAxios()
    // 后续API调用逻辑一致
  }
}

补充：组合式API的setup函数不存在this，所以原选项式API的this.$axios用法失效是正常的，以上方案均基于Nuxt组合式API的上下文机制实现。

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