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

背景

在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敏感数据）非常有用。