坑有千千万,汇总下目前的解决办法,也因为对框架的不够深入,掌握得有限,大家有更好的,请指教【抱拳】
- 浏览器刷新的时候页面没有显示数据,接口data无返回。本身nuxt的useFetch在参数不变的情况下,数据是不会重新从后台接口去请求数据的,会直接拿上一次的结果。但是有实时去后台获取数据这样的需求,比如我的关注页面,在其他页面点了关注,每次进这个页面或者刷新都需要去后台重新获取数据,所以我给入参加了一个以时间戳为值的参数key,但是这样导致每次F5刷新页面的时候,都拿不到数据,导致页面没有显示。Suspense不起作用。
const { data } = await useFetch( 'http://www.baidu.com/xx-list', { method: 'get', key: uuid(), headers: { Authorization: 'xxx' }, params: { page: currentPage.value, size: 10 } } ) console.log('data', data)
刷新的时候打印结果data.value是null
解决1: 加个定时器(不友好)
<script lang="ts" setup>
const { data } = await useFetch(
'http://www.baidu.com/xx-list',
{
method: 'get',
key: uuid(),
headers: {
Authorization: 'xxxx'
},
params: {
page: currentPage.value,
size: 10
}
}
)
setTimeout(() => {
console.log('data', data)
}, 500);
</script>
解决2: 函数方法+await nextTick(),把获取数据接口放在方法里,方法里使用await nextTick(),然后调用方法
<script lang="ts" setup>
import { nextTick } from 'vue'
const feachData = async (key = '') => {
await nextTick()
const { data, pending, error, refresh } = await useFetch(
'http://www.baidu.com/xx-list',
{
method: 'get',
key: uuid(),
headers: {
Authorization: 'xxx'
},
params: {
page: currentPage.value,
size: 10
}
}
)
console.log('data', data.value)
}
feachData()
<script>