解决：NuxtJS项目，刷新localhost:3000/product/details/111页面的时候useFetch不工作！

Vinca@

于 2024-03-29 15:26:27 发布

阅读量485

点赞数 14

分类专栏： NuxtJS 文章标签： nuxt vue3 useFetch

本文链接：https://blog.csdn.net/weixin_45687201/article/details/137140365

版权

NuxtJS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

文章讲述了在Nuxt项目中，点击产品列表正常跳转到详情页后，刷新浏览器不再执行请求的问题。通过`useFetch`和NuxtDevTools，发现是懒加载策略导致。最终解决方案是将`lazy`和`server`选项结合，确保首次加载仅在客户端获取数据，从而解决刷新时的问题。

摘要由CSDN通过智能技术生成

背景

在nuxt项目中，点击产品列表跳转到详情页是正常的，路径为：localhost:3000/product/device?id=111

但是对着浏览器刷新之后，发现不在执行请求了。

要解决问题：刷新浏览器之后正常展示产品内容。

目录层级

   |  pages
      | product
        | device.vue
        | details
          | [id].vue

业务代码


# pages > product > details > [id].vue

<script lang="ts" setup>
// 请求
const { id } = useRoute().params;
const {
  data: detRes,
  pending
}: { data: any; pending: any; refresh: any } = await useFetch(`/api/content/productDetails`, {
  query: { id }
});
</script>

资料查询

网络请求重复

useFetch 组合函数确保一旦在服务器上进行了 API 调用，数据将以有效的方式在负载中传递到客户端。
负载是通过 useNuxtApp().payload 访问的 JavaScript 对象。它在客户端上用于避免在浏览器中执行代码时重新获取相同的数据。

验证

使用 Nuxt DevTools 在 Payload 选项卡中检查此数据。配置如下：

# nuxt.config.ts

export default defineNuxtConfig({

  devtools: { enabled: true }

});

在浏览器调试查看，地址进入详情页面的时候显示结果： HH9z7VZu92为产品详情调用useFetch所产生的有效负载。

然后手动刷新浏览器，显示结果：

明显没有HH9z7VZu92 产品详情

修复

修改自己的业务代码：如下

// 请求
const { id } = useRoute().params;
const {
  data: detRes,
  pending,
  refresh
}: { data: any; pending: any; refresh: any } = await useFetch(`/api/content/productDetails`, {
  query: { id }
});
refresh();

但是这种方法优缺点，就是首次进入的时候会请求2次，虽然解决了页面手动刷新的问题，但这不是一个好的解决方案。

最终代码

// 请求
const { id } = useRoute().params;
const { data: detRes, pending }: { data: any; pending: any; refresh: any } = await useFetch(`/api/content/productDetails`, {
  query: { id },
  lazy: true,
  server: false
});

仅在客户端获取数据
默认情况下，数据获取的组合函数会在客户端和服务器环境中执行其异步函数。将server选项设置为false，只在客户端执行调用。在初始加载时，在水合过程完成之前不会获取数据，因此你需要处理一个加载状态，但在随后的客户端导航中，数据将在加载页面之前等待获取。
与lazy选项结合使用，这对于首次渲染不需要的数据（例如，非SEO敏感数据）非常有用。