Nuxt提示集合

嘿那里！

最近，Michael Thiessen 请求我帮助审阅他的新电子书，包括 Nuxt Tips Collection，我很荣幸接受这个请求 - 感谢 Michael 在这个新创作中考虑我！ :)

在本文中，我想向您介绍这一系列令人惊叹的提示和技巧，您今天就可以开始在工作和业余爱好项目中使用它们。我强烈建议您尝试一下，看看您还有多少关于 Nuxt 和 Vue 不了解的事情？

如果您使用以下链接，我将从迈克尔的联盟计划中获得一些佣金，非常感谢您？

另外，别忘了使用 JAKUBTIPS 折扣码享受 20% 的折扣！ ？

享受吧！

？我最喜欢的一些 Nuxt 技巧

下面，我列出了一些我最喜欢的建议。其余的，请查看 Michael 的完整提示集:)

调用一次

如果您只需运行一段代码一次，可以使用 Nuxt 可组合项（自 3.9 起）：

await callOnce(async () => {
  // This will only be run one time, even with SSR
});

使用 callOnce 可确保您的代码仅执行一次 - 无论是在 SSR 期间在服务器上执行，还是在用户导航到新页面时在客户端上执行。 每次路由加载只执行一次。它不返回任何值，并且可以在任何可以放置可组合项的地方执行。

它还有一个类似于 useFetch 或 useAsyncData 的键，以确保它可以跟踪已执行的内容和未执行的内容：

默认情况下，Nuxt 将使用文件和行号自动生成唯一密钥，但这并非在所有情况下都有效。

['one', 'two', 'three'].forEach(item => {
  // Run once for each item
  callOnce(item, async () => {
    // Do something with the item
  });
});

NuxtPage 上的默认插槽

NuxtPage 组件上的默认槽会传递所有路由属性，因此我们可以在需要时拥有更多控制权：

我们可以像使用 Vue Router 中的 RouterView 组件一样使用它（快五倍！）。

<NuxtPage v-slot="{ Component }">
  <!-- Add in our own keep-alive component -->
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</NuxtPage>

NuxtClientFallback 组件

如果服务器端渲染过程中出现错误，可以使用 渲染一些后备内容的组件：

但这仍然是实验性的，因此您必须将experimental.clientFallback 设置为 true 才能使其工作。请务必查看文档以获取最新信息。

<template>
  <NuxtClientFallback>
    <ServerComponentWithError />

    <template #fallback>
      <p>Whoops, didn't render properly!</p>
    </template>
  </NuxtClientFallback>
</template>

服务器路由中的查询参数

从我们的服务器路由中的查询参数中获取值非常简单：

如果我们有查询 ?hello=world&flavors[]=chocolate&flavours[]=vanilla 我们将得到以下参数对象：

import { getQuery } from 'h3';

export default defineEventHandler((event) => {
  const params = getQuery(event);
});

我们还可以将验证器函数与 getValidatedQuery 结合使用：

{
  hello: 'world',
  flavours: [
    'chocolate',
    'vanilla',
  },
}

重复数据删除获取

import { getValidatedQuery } from 'h3';

export default defineEventHandler((event) => {
  const params = getValidatedQuery(
    event,
    obj => Array.isArray(obj.flavours)
  );
});

从 3.9 开始，我们可以使用 dedupe 参数控制 Nuxt 去重的方式：

useFetch 可组合项（和 useAsyncData 可组合项）将在参数更新时以反应方式重新获取数据。默认情况下，他们会取消上一个请求并使用新参数发起一个新请求。

useFetch('/api/search/', {
  query: {
    search,
  },
  dedupe: 'cancel'  // Cancel the previous request and make a new request
});

但是，您可以更改此行为以推迟现有请求 - 当存在待处理请求时，不会发出新请求：

这使我们能够更好地控制数据加载和请求的方式。

useFetch('/api/search/', {
  query: {
    search,
  },
  dedupe: 'defer'  // Keep the pending request and don't initiate a new one
});

？了解更多

使用以下链接查看完整的 Nuxt 提示集合，我将从 Michael 的联属计划中获得一些佣金，非常感谢您？

另外，别忘了使用 JAKUBTIPS 折扣码享受 20% 的折扣！ ？

✅ 总结

干得好！您刚刚了解了 Michael 提供的令人惊叹的 Nuxt 知识源！

保重，下次再见！

一如既往地快乐编码？️

以上是Nuxt提示集合的详细内容。更多信息请关注PHP中文网其他相关文章！