Collection de conseils Nuxt

Salut !

Récemment, Michael Thiessen m'a demandé de l'aider à réviser son nouvel ebook incluant Nuxt Tips Collection et je me sens honoré d'accepter cette demande - merci Michael d'avoir pensé à moi pour cette nouvelle création ! :)

Dans cet article, j'aimerais vous présenter cette incroyable collection de trucs et astuces que vous pouvez commencer à utiliser dès aujourd'hui dans vos projets de travail et de loisirs. Je vous recommande fortement de l'essayer et de voir combien de choses vous ne savez toujours pas sur Nuxt et Vue ?

Si vous utilisez le lien suivant, je toucherai une commission du programme d'affiliation de Michael alors merci beaucoup ?

N'oubliez pas non plus d'utiliser le code de réduction JAKUBTIPS pour bénéficier de 20 % de réduction ! ?

Profitez !

? Quelques-uns de mes conseils Nuxt préférés

Ci-dessous, je liste quelques-uns de mes conseils préférés que j’ai le plus appréciés. Pour le reste, consultez la collection complète de conseils de Michael :)

appelerUne fois

Si vous n'avez besoin d'exécuter un morceau de code qu'une seule fois, il existe un composable Nuxt pour cela (depuis la 3.9) :

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

L'utilisation de callOnce garantit que votre code n'est exécuté qu'une seule fois, soit sur le serveur pendant SSR ou sur le client lorsque l'utilisateur accède à une nouvelle page.

Il n’est exécuté qu’une seule fois par chargement de route. Il ne renvoie aucune valeur et peut être exécuté partout où vous pouvez placer un composable.

Il possède également une clé similaire à useFetch ou useAsyncData, pour s'assurer qu'il peut garder une trace de ce qui a été exécuté et de ce qui ne l'a pas été :

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

Par défaut, Nuxt utilisera le numéro de fichier et de ligne pour générer automatiquement une clé unique, mais cela ne fonctionnera pas dans tous les cas.

Emplacement par défaut sur NuxtPage

L'emplacement par défaut du composant NuxtPage reçoit tous les accessoires de route, nous pouvons donc avoir plus de contrôle si nous en avons besoin :

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

Nous pouvons l'utiliser comme nous utiliserions le composant RouterView de Vue Router (disons que cinq fois plus vite !).

Composant NuxtClientFallback

Si vous rencontrez une erreur lors de votre rendu côté serveur, vous pouvez utiliser l'outil composant pour afficher du contenu de secours :

<template>
  <NuxtClientFallback>
    <ServerComponentWithError />

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

Ceci est encore expérimental, vous devez donc avoir experimental.clientFallback défini sur true pour que cela fonctionne. Assurez-vous de consulter la documentation pour les dernières informations.

Paramètres de requête dans les routes du serveur

Obtenir des valeurs à partir du paramètre de requête dans nos routes de serveur est simple :

import { getQuery } from 'h3';

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

Si nous avons la requête ?hello=world&flavours[]=chocolate&flavours[]=vanilla nous récupérerons l'objet params suivant :

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

On peut également utiliser une fonction de validation avec getValidatedQuery :

import { getValidatedQuery } from 'h3';

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

Récupérations de déduplication

Depuis la version 3.9, nous pouvons contrôler la façon dont Nuxt déduplique les récupérations avec le paramètre dedupe :

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

Le composable useFetch (et le composable useAsyncData) récupérera les données de manière réactive à mesure que leurs paramètres sont mis à jour. Par défaut, ils annuleront la demande précédente et en lanceront une nouvelle avec les nouveaux paramètres.

Cependant, vous pouvez modifier ce comportement pour vous en remettre à la demande existante : tant qu'il y a une demande en attente, aucune nouvelle demande ne sera effectuée :

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

Cela nous donne un meilleur contrôle sur la façon dont nos données sont chargées et les demandes sont effectuées.

? Apprendre encore plus

Découvrez la collection complète de conseils Nuxt en utilisant le lien suivant, je recevrai une commission du programme d'affiliation de Michael, alors merci beaucoup ?

N'oubliez pas non plus d'utiliser le code de réduction JAKUBTIPS pour bénéficier de 20 % de réduction ! ?

✅Résumé

Bravo ! Vous venez de découvrir l'incroyable source de connaissances Nuxt de Michael !

Prends soin de toi et à la prochaine fois !

Et bon codage comme toujours ?️

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!