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中文網其他相關文章！