Nuxt3项目中的问题汇总-刷新页面useFetch无返回

坑有千千万，汇总下目前的解决办法，也因为对框架的不够深入，掌握得有限，大家有更好的，请指教【抱拳】

1. 浏览器刷新的时候页面没有显示数据，接口data无返回。本身nuxt的useFetch在参数不变的情况下，数据是不会重新从后台接口去请求数据的，会直接拿上一次的结果。但是有实时去后台获取数据这样的需求，比如我的关注页面，在其他页面点了关注，每次进这个页面或者刷新都需要去后台重新获取数据，所以我给入参加了一个以时间戳为值的参数key，但是这样导致每次F5刷新页面的时候，都拿不到数据，导致页面没有显示。Suspense不起作用。const{ data }=awaituseFetch('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 ='')=>{awaitnextTick()const{ data, pending, error, refresh }=awaituseFetch('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>