如何在Nuxt3中使用@nuxtjs/axios模块？

Question

我有以下代码从https://fakestoreapi.com/products/获取API数据

<template>
<div>


</div>
</template>


  <script>  
  definePageMeta({
    layout: "products"
  })

export default {
  data () {
    return {
      data: '',
    }
  },
  async fetch() {
    const res = await this.$axios.get('https://fakestoreapi.com/products/')
    console.log(res.data)
  },
}
</script>

我安装了axios，在nuxt.config.ts中我安装了：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({

    app: {
        head: {
            title: 'Nuxt',
            meta: [
                { name: 'description', content: 'Everything about - Nuxt-3'}
            ],
            link: [
                {rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
            ]
        }
    },
    runtimeConfig: {
        currencyKey: process.env.CURRENCY_API_KEY
    },
    modules: [
        "@nuxtjs/tailwindcss",
    ],
    buildModules: [
        "@nuxtjs/axios"
    ],
    axios: {
      baseURL: '/',
    }
})

我的控制台中有以下内容

是一个实验性的特性，它的API可能会改变。

我不会在控制台中获取API数据。

Answer 1

正如告诉在这页上的那样，我们不再在Nuxt3中使用@nuxtjs/axios模块，而是使用ohmyfetch，它现在通过$axios作为写在这里直接进入框架的核心。

因此，您的配置文件应该如下所示

export default defineNuxtConfig({
  app: {
    head: {
      title: 'Nuxt Dojo',
      meta: [
        { name: 'description', content: 'Everything about - Nuxt-3' }
      ],
      link: [
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
      ]
    }
  },
  runtimeConfig: {
    currencyKey: process.env.CURRENCY_API_KEY
  },
  modules: [
    "@nuxtjs/tailwindcss"
  ],
})

给定的/pages/products/index.vue可以是这样的

<template>
  <div>
    <p v-for="user in users" :key="user.id">ID: {{ user.id }}  {{ user.name }}</p>
  </div>
</template>


<script>
definePageMeta({
  layout: "products"
})

export default {
  data () {
    return {
      users: '',
    }
  },
  async mounted() {
    this.users = await $fetch('https://jsonplaceholder.typicode.com/users')
  },
}
</script>

这就是它的结尾(网络选项卡中有一个成功的HTTP请求)

​

​

作为确认，我们可以看到，Nuxt3在模块页上确实不支持(也不会支持)该模块。

Suspense错误在正式文件中详细说明。

<Suspense>是一个实验特性。它不能保证达到稳定状态，API可能会在此之前更改。

它可能看起来很可怕，但您完全可以使用API本身，因为它是一个警告，而不是一个错误，它完全可以！