Koleksi Petua Nuxt

Hei!

Baru-baru ini, Michael Thiessen meminta bantuan saya untuk menyemak ebook baharunya termasuk Koleksi Petua Nuxt dan saya berasa berbesar hati untuk menerima permintaan ini - terima kasih Michael kerana memikirkan saya untuk ciptaan baharu ini! :)

Dalam artikel ini, saya ingin memperkenalkan anda kepada koleksi petua dan helah hebat ini yang boleh anda mula gunakan hari ini dalam kedua-dua projek kerja dan hobi. Saya sangat mengesyorkan untuk mencubanya dan melihat berapa banyak perkara yang anda masih tidak tahu tentang Nuxt dan Vue ?

Jika anda menggunakan pautan berikut, saya akan mendapat sedikit komisen daripada program gabungan oleh Michael jadi terima kasih banyak-banyak?

Juga, jangan lupa gunakan kod diskaun JAKUBTIPS untuk DISKAUN 20%! ?

Nikmati!

? Beberapa Petua Nuxt kegemaran saya

Di bawah, saya menyenaraikan beberapa petua kegemaran saya yang paling saya suka. Untuk selebihnya, lihat koleksi petua penuh oleh Michael :)

panggil sekali

Jika anda perlu menjalankan sekeping kod sekali sahaja, terdapat Nuxt yang boleh digubah untuk itu (sejak 3.9):

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

Menggunakan callOnce memastikan bahawa kod anda hanya dilaksanakan sekali — sama ada pada pelayan semasa SSR atau pada klien apabila pengguna menavigasi ke halaman baharu.

Ia hanya dilaksanakan sekali bagi setiap muatan laluan. Ia tidak mengembalikan apa-apa nilai dan boleh dilaksanakan di mana-mana sahaja anda boleh meletakkan kompos.

Ia juga mempunyai kunci yang serupa dengan useFetch atau useAsyncData, untuk memastikan ia boleh menjejaki perkara yang telah dilaksanakan dan perkara yang belum:

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

Secara lalai Nuxt akan menggunakan fail dan nombor baris untuk menjana kunci unik secara automatik, tetapi ini tidak akan berfungsi dalam semua kes.

Slot Lalai pada NuxtPage

Slot lalai pada komponen NuxtPage diluluskan semua prop laluan, jadi kami boleh mempunyai lebih kawalan jika kami memerlukannya:

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

Kami boleh menggunakannya sama seperti kami menggunakan komponen RouterView daripada Vue Router (katakan lima kali cepat!).

Komponen NuxtClientFallback

Jika anda mempunyai ralat semasa pemaparan sebelah pelayan anda, anda boleh menggunakan komponen untuk menghasilkan beberapa kandungan sandaran:

<template>
  <NuxtClientFallback>
    <ServerComponentWithError />

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

Ini masih percubaan, jadi anda mesti mempunyai eksperimen.clientFallback ditetapkan kepada benar untuk ini berfungsi. Pastikan anda menyemak dokumen untuk mendapatkan maklumat terkini.

Param Pertanyaan dalam Laluan Pelayan

Mendapatkan nilai daripada parameter pertanyaan dalam laluan pelayan kami adalah mudah:

import { getQuery } from 'h3';

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

Jika kami mempunyai pertanyaan ?hello=world&flavours[]=chocolate&flavours[]=vanila kami akan mendapatkan kembali objek params berikut:

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

Kami juga boleh menggunakan fungsi validator dengan getValidatedQuery:

import { getValidatedQuery } from 'h3';

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

Dedupe Fetches

Sejak 3.9 kami boleh mengawal cara Nuxt menyahduplikasi pengambilan dengan parameter dedupe:

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

Gubah useFetch (dan boleh gubah useAsyncData) akan mengambil semula data secara reaktif apabila parameternya dikemas kini. Secara lalai, mereka akan membatalkan permintaan sebelumnya dan memulakan permintaan baharu dengan parameter baharu.

Walau bagaimanapun, anda boleh menukar gelagat ini untuk menangguhkan permintaan sedia ada — sementara terdapat permintaan yang belum selesai, tiada permintaan baharu akan dibuat:

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

Ini memberi kami kawalan yang lebih besar terhadap cara data kami dimuatkan dan permintaan dibuat.

? Ketahui lebih lanjut

Lihat Koleksi Petua Nuxt penuh dengan menggunakan pautan berikut, saya akan mendapat sedikit komisen daripada program gabungan oleh Michael jadi terima kasih banyak?

Juga, jangan lupa gunakan kod diskaun JAKUBTIPS untuk DISKAUN 20%! ?

✅ Ringkasan

Syabas! Anda baru sahaja mengetahui tentang sumber pengetahuan Nuxt yang menakjubkan oleh Michael!

Berhati-hati dan jumpa anda lain kali!

Dan selamat mengekod seperti biasa ?️

Atas ialah kandungan terperinci Koleksi Petua Nuxt. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!