如何在组合 API 的 setup() 中使用 $axios Nuxt 模块？答案

【问题标题】：How to use $axios Nuxt module inside of setup() from composition API?如何在组合 API 的 setup() 中使用 $axios Nuxt 模块？
【发布时间】：2021-07-27 07:35:24
【问题描述】：

文档说在methods/mounted/etc 内部使用this.$axios.$get()，但是在setup() 内部调用时会抛出TypeError: _this is undefined。 $axios 是否与组合 API 兼容？

为了澄清，我专门谈论 axios nuxt 插件，而不仅仅是一般地使用 axios。 https://axios.nuxtjs.org/

例如，这样的事情会抛出上面的错误

export default {
  setup: () => {
    const data = this.$axios.$get("/my-url");
  }
}

【问题讨论】：

标签： javascript vuejs2 nuxt.js vue-composition-api

【解决方案1】：

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

setup() {
  const { $axios } = useContext();
}

【讨论】：

啊，我忘记了 useContext()。我明天试试这个。

【解决方案2】：

好的，所以使用 Nuxt 插件的通常配置 plugins/vue-composition.js

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

nuxt.config.js

plugins: ['~/plugins/vue-composition']

然后您可以继续测试页面并运行此类代码以成功获取 axios

<script>
import axios from 'axios'
import { onMounted } from '@vue/composition-api'

export default {
  name: 'App',
  setup() {
    onMounted(async () => {
      const res = await axios.get('https://jsonplaceholder.typicode.com/posts/1')
      console.log(res)
    })
  },
}
</script>

我不确定在这种情况下如何全局导入 axios，但由于它是组合 API，因此您不要使用选项 API 密钥（mounted 等...）。

感谢这篇文章对如何使用 Vue3 的见解：https://stackoverflow.com/a/65015450/8816585

【讨论】：

我应该更清楚。我指的是 nuxt 插件：axios.nuxtjs.org。我已经有组合 api 工作。问题是我不能根据插件文档axios.nuxtjs.org 调用 this.$axios