Nuxt-Tipps-Sammlung

Hallo!

Kürzlich hat mich Michael Thiessen um Hilfe bei der Rezension seines neuen E-Books einschließlich der Nuxt Tips Collection gebeten und ich fühle mich geehrt, diese Anfrage anzunehmen – vielen Dank, Michael, dass du bei dieser neuen Kreation an mich gedacht hast! :)

In diesem Artikel möchte ich Ihnen diese erstaunliche Sammlung von Tipps und Tricks vorstellen, die Sie heute sowohl bei der Arbeit als auch bei Hobbyprojekten anwenden können. Ich empfehle dringend, es auszuprobieren und herauszufinden, wie viele Dinge Sie noch nicht über Nuxt und Vue wissen?

Wenn du den folgenden Link verwendest, erhalte ich eine Provision aus dem Partnerprogramm von Michael, also vielen Dank ?

Vergessen Sie außerdem nicht, den JAKUBTIPS-Rabattcode für 20 % RABATT zu verwenden! ?

Viel Spaß!

? Einige meiner Lieblings-Nuxt-Tipps

Im Folgenden liste ich einige meiner Lieblingstipps auf, die mir am besten gefallen haben. Schauen Sie sich für den Rest die vollständige Tipps-Sammlung von Michael an :)

callOnce

Wenn Sie einen Code nur einmal ausführen müssen, gibt es dafür ein Nuxt Composable (seit 3.9):

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

Durch die Verwendung von callOnce wird sichergestellt, dass Ihr Code nur einmal ausgeführt wird – entweder auf dem Server während SSR oder auf dem Client, wenn der Benutzer zu einer neuen Seite navigiert.

Es wird nur einmal pro Routenladung ausgeführt. Es gibt keinen Wert zurück und kann überall dort ausgeführt werden, wo Sie ein zusammensetzbares Element platzieren können.

Es verfügt außerdem über einen Schlüssel ähnlich wie useFetch oder useAsyncData, um sicherzustellen, dass verfolgt werden kann, was ausgeführt wurde und was nicht:

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

Standardmäßig verwendet Nuxt die Datei- und Zeilennummer, um automatisch einen eindeutigen Schlüssel zu generieren, aber das funktioniert nicht in allen Fällen.

Standard-Slot auf NuxtPage

Dem Standard-Slot in der NuxtPage-Komponente werden alle Routen-Requisiten übergeben, sodass wir bei Bedarf mehr Kontrolle haben:

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

Wir können es genauso verwenden wie die RouterView-Komponente von Vue Router (sagen wir das fünfmal schnell!).

NuxtClientFallback-Komponente

Wenn beim serverseitigen Rendern ein Fehler auftritt, können Sie den Befehl verwenden. Komponente zum Rendern einiger Fallback-Inhalte:

<template>
  <NuxtClientFallback>
    <ServerComponentWithError />

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

Dies ist jedoch noch experimentell, daher muss experimentell.clientFallback auf „true“ gesetzt sein, damit dies funktioniert. Schauen Sie sich unbedingt die Dokumente an, um die neuesten Informationen zu erhalten.

Abfrageparameter in Serverrouten

Das Abrufen von Werten aus den Abfrageparametern in unseren Serverrouten ist unkompliziert:

import { getQuery } from 'h3';

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

Wenn wir die Abfrage ?hello=world&flavours[]=chocolate&flavours[]=vanilla haben, erhalten wir das folgende Parameterobjekt zurück:

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

Wir können auch eine Validatorfunktion mit getValidatedQuery verwenden:

import { getValidatedQuery } from 'h3';

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

Deduplizierungsabrufe

Seit 3.9 können wir mit dem Dedupe-Parameter steuern, wie Nuxt Abrufe dedupliziert:

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

Das composable useFetch (und das composable useAsyncData) ruft die Daten reaktiv erneut ab, wenn ihre Parameter aktualisiert werden. Standardmäßig brechen sie die vorherige Anfrage ab und initiieren eine neue mit den neuen Parametern.

Sie können dieses Verhalten jedoch ändern, um stattdessen mit der bestehenden Anfrage fortzufahren – solange eine Anfrage aussteht, werden keine neuen Anfragen gestellt:

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

Dadurch haben wir eine bessere Kontrolle darüber, wie unsere Daten geladen und Anfragen gestellt werden.

? Erfahren Sie mehr

Schauen Sie sich die vollständige Nuxt-Tipps-Sammlung an, indem Sie den folgenden Link verwenden. Ich erhalte eine Provision vom Partnerprogramm von Michael, also vielen Dank ?

Vergessen Sie außerdem nicht, den JAKUBTIPS-Rabattcode für 20 % RABATT zu verwenden! ?

✅ Zusammenfassung

Gut gemacht! Sie haben gerade von der erstaunlichen Nuxt-Wissensquelle von Michael erfahren!

Mach's gut und bis zum nächsten Mal!

Und wie immer viel Spaß beim Codieren ?️

Das obige ist der detaillierte Inhalt vonNuxt-Tipps-Sammlung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!