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

Posted 2023-02-23

【中文标题】如何在组合 API 的 setup() 中使用 $axios Nuxt 模块？

【英文标题】：How to use $axios Nuxt module inside of setup() from composition API?

【发布时间】：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");
  

【参考方案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://***.com/a/65015450/8816585

【讨论】：

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

调用 this.$axios