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

Question

文档说在 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");
  }
}

Answer 1

好的，所以使用 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 等。 .).

感谢这位 post 对如何使用 Vue3 的见解：

Answer 2

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

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

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

How to use $axios Nuxt module inside of setup() from composition API?

javascript

vuejs2

nuxt.js

vue-composition-api