Nuxt 팁 컬렉션

안녕하세요!

최근 Michael Thiessen이 Nuxt Tips Collection을 포함한 자신의 새 eBook을 검토하는 데 도움을 달라고 요청했고 저는 이 요청을 수락하게 되어 영광입니다. 이 새로운 창작물에 대해 저를 생각해 주신 Michael에게 감사드립니다! :)

이 기사에서는 오늘부터 업무와 취미 프로젝트 모두에서 사용할 수 있는 놀라운 팁과 요령 모음을 소개하고 싶습니다. Nuxt와 Vue에 대해 아직도 모르는 것이 얼마나 많은지 확인해 보시기 바랍니다.

다음 링크를 이용하시면 마이클이 제휴 프로그램으로부터 커미션을 받을 수 있으니 정말 감사합니다 ?

그리고 20% 할인을 받으려면 JAKUBTIPS 할인 코드를 사용하는 것도 잊지 마세요! ?

즐기세요!

? 내가 가장 좋아하는 Nuxt Tips

아래에는 제가 가장 마음에 들었던 몇 가지 팁을 나열했습니다. 나머지 내용은 Michael의 전체 팁 컬렉션을 확인하세요 :)

callOnce

코드를 한 번만 실행해야 하는 경우 이를 위한 Nuxt 컴포저블이 있습니다(3.9부터).

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

callOnce를 사용하면 SSR 동안 서버에서또는 사용자가 새 페이지로 이동할 때 클라이언트에서 코드가 한 번만 실행됩니다.

경로 로드당 한 번만 실행됩니다. 값을 반환하지 않으며 컴포저블을 배치할 수 있는 모든 위치에서 실행할 수 있습니다.

또한 useFetch 또는 useAsyncData와 유사한 키가 있어 실행된 것과 실행되지 않은 것을 추적할 수 있습니다.

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

기본적으로 Nuxt는 파일과 줄 번호를 사용하여 자동으로 고유 키를 생성하지만 모든 경우에 작동하지는 않습니다.

NuxtPage의 기본 슬롯

NuxtPage 구성 요소의 기본 슬롯은 모든 경로 props를 전달하므로 필요한 경우 더 많은 제어를 할 수 있습니다.

<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>

아직 실험적이므로 이것이 작동하려면 Experiment.clientFallback을 true로 설정해야 합니다. 최신 정보는 문서를 확인하세요.

서버 경로의 쿼리 매개변수

서버 경로의 쿼리 매개변수에서 값을 가져오는 것은 간단합니다.

import { getQuery } from 'h3';

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

쿼리가 ?hello=world&flavours[]=chocolate&flavours[]=vanilla인 경우 다음 매개변수 개체를 반환합니다.

{
  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이 제휴 프로그램에서 커미션을 받을 테니 정말 감사합니다 ?

그리고 20% 할인을 받으려면 JAKUBTIPS 할인 코드를 사용하는 것도 잊지 마세요! ?

✅ 요약

잘했어요! 방금 Michael이 제공한 놀라운 Nuxt 지식 소스에 대해 배웠습니다!

몸조심하시고 다음에 만나요!

그리고 언제나처럼 즐거운 코딩을 하시나요 ?️

위 내용은 Nuxt 팁 컬렉션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!