如何在組合 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

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

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

Answer 2

好的，所以使用 Nuxt 插件 aka 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