Nuxt ヒント集

こんにちは!

最近、Michael Thiessen から、Nuxt Tips Collection を含む新しい電子ブックのレビューを手伝ってほしいと頼まれました。この依頼を引き受けて光栄に思います。この新しい作品について私のことを考えてくれて、Michael に感謝します! :)

この記事では、仕事と趣味のプロジェクトの両方で今日から使い始めることができる、素晴らしいヒントとコツのコレクションを紹介したいと思います。ぜひ試してみて、Nuxt と Vue についてまだ知らないことがどれだけあるかを確認することを強くお勧めします?

次のリンクを使用すると、Michael のアフィリエイト プログラムからコミッションが得られますので、よろしくお願いします?

また、JAKUBTIPS 割引コードを使用して 20% オフになることを忘れないでください。 ?

お楽しみください!

?私のお気に入りの Nuxt ヒントのいくつか

以下に、私が最も気に入ったお気に入りのヒントをいくつか挙げます。残りについては、Michael による完全なヒント集をご覧ください :)

一度コールする

コードを 1 回だけ実行する必要がある場合は、そのための Nuxt コンポーザブルがあります (3.9 以降)。

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

callOnce を使用すると、SSR 中にサーバー上で またはユーザーが新しいページに移動するときにクライアント上で のいずれかで、コードが 1 回だけ実行されるようになります。

ルートのロードごとに 1 回だけ実行されます。これは値を返さず、コンポーザブルを配置できる場所であればどこでも実行できます。

これには、実行されたものと実行されなかったものを確実に追跡できるように、useFetch または useAsyncData に似たキーもあります。

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

デフォルトでは、Nuxt はファイルと行番号を使用して一意のキーを自動的に生成しますが、これはすべての場合に機能するとは限りません。

NuxtPageのデフォルトスロット

NuxtPage コンポーネントのデフォルト スロットにはすべてのルート プロパティが渡されるため、必要に応じてさらに制御できます。

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

Vue Router の RouterView コンポーネントを使用するのと同じように使用できます (つまり、5 倍高速です!)。

NuxtClientFallback コンポーネント

サーバー側のレンダリング中にエラーが発生した場合は、 を使用できます。フォールバック コンテンツをレンダリングするコンポーネント:

<template>
  <NuxtClientFallback>
    <ServerComponentWithError />

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

これはまだ実験段階であるため、これが機能するには、experimental.clientFallback を true に設定する必要があります。最新情報については、必ずドキュメントをご確認ください。

サーバールートのクエリパラメータ

サーバールートのクエリパラメータから値を取得するのは簡単です:

import { getQuery } from 'h3';

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

クエリ ?hello=world&flavors[]=chocolate&flavors[]=vanilla がある場合、次の params オブジェクトが返されます。

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

getValidatedQuery でバリデーター関数を使用することもできます:

import { getValidatedQuery } from 'h3';

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

重複排除フェッチ

3.9 以降、Nuxt が重複排除パラメーターを使用してフェッチを重複排除する方法を制御できるようになりました。

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

useFetch コンポーザブル (および useAsyncData コンポーザブル) は、パラメーターが更新されると反応的にデータを再フェッチします。デフォルトでは、前のリクエストがキャンセルされ、新しいパラメータで新しいリクエストが開始されます。

ただし、この動作を変更して既存のリクエストを延期することもできます。保留中のリクエストがある間は、新しいリクエストは行われません。

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

これにより、データのロード方法とリクエストの作成方法をより詳細に制御できるようになります。

?もっと詳しく知る

次のリンクを使用して、Nuxt Tips コレクション全体をチェックしてください。Michael のアフィリエイト プログラムから報酬を得ることができますので、よろしくお願いします?

また、JAKUBTIPS 割引コードを使用すると 20% オフになりますので、お忘れなく! ?

✅ まとめ

よくやった！ Michael による素晴らしい Nuxt 知識ソースについて学びました。

気をつけて、また次回お会いしましょう!

そしていつものようにコーディングを楽しんでください?️

以上がNuxt ヒント集の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。