As told 在本页 https://axios.nuxtjs.org/,我们不使用@nuxtjs/axios
不再使用 Nuxt3 模块,而是ohmyfetch
,现在通过以下方式直接嵌入到框架的核心中$axios
as 写在这里 https://nuxt.com/docs/getting-started/data-fetching/#usefetch.
因此,您的配置文件应该如下所示
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 确实不支持(也不会支持)该模块.
The Suspense
错误详细信息在官方文档 https://vuejs.org/guide/built-ins/suspense.html#suspense
<Suspense>
是一个实验性功能。不保证达到稳定状态,API 可能会在此之前发生变化。
这可能看起来很可怕,但您完全可以使用 API 本身,并且由于这是警告而不是错误,所以完全没问题!