我正在尝试新的 Nuxt.js Fetch 方法。最初,我认为一切都很好。但是只有在我刷新页面时才会获取和呈现数据。 但是,如果通过 $fetchState.error 访问该页面,则该错误等于 true,并且永远不会获取数据。
我在这里做错了什么?
<template>
<main>
<div>
<div>
<p v-if="$fetchState.pending">
Fetching vehicles...
</p>
<p v-else-if="$fetchState.error">
Error while fetching vehicles
</p>
<div
v-for="(vehicle, index) in usedVehicles"
v-else
:key="index"
>
<nuxt-link :to="`cars/${vehicle.Id}`">
{{ vehicle.Make }}
</nuxt-link>
</div>
</div>
<button @click="$fetch">Refresh Data</button>
</div>
</main>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
usedVehicles: []
}
},
async fetch() {
const { data } = await axios.get(
'https://random.com/api'
)
// `todos` has to be declared in data()
this.usedVehicles = data.Vehicles
},
methods: {
refresh() {
this.$fetch()
}
}
}
</script>
最佳答案
刚刚回答了一个相关问题:fetch
所以在生命周期钩子(Hook)中,
提取被调用(但仅在页面加载后完成)。
这意味着当您刷新页面时,数据应该缓存在客户端(因此呈现 this.usedVehicles
)。
如果你想确保在第一次挂载之前检索数据,你可以使用 asyncData
并等待调用 - 这样 usedVehicles
在页面被加载之前设置安装。
例子
<template>
<main>
<div>
<div>
<p v-if="$fetchState.pending">
Fetching vehicles...
</p>
<p v-else-if="$fetchState.error">
Error while fetching vehicles
</p>
<div
v-for="(vehicle, index) in usedVehicles"
v-else
:key="index"
>
<nuxt-link :to="`cars/${vehicle.Id}`">
{{ vehicle.Make }}
</nuxt-link>
</div>
</div>
<button @click="$fetch">Refresh Data</button>
</div>
</main>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
usedVehicles: []
}
},
async asyncData() {
const { data } = await axios.get(
'https://random.com/api'
)
return { usedVehicles: data.Vehicles }
}
async fetch() {
const { data } = await axios.get(
'https://random.com/api'
)
// `todos` has to be declared in data()
this.usedVehicles = data.Vehicles
},
methods: {
refresh() {
this.$fetch()
}
}
}
</script>
这意味着对于每个请求,检索数据都会有一些延迟 - 但这取决于这是否是您想要的结果。
关于javascript - 获取仅适用于刷新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61755300/