Sveltekit 변경 사항: 로드 기능

소개

이 기사에서는 sveltekit 프레임워크의 로드 기능에 대한 새로운 변경 사항에 대해 설명하겠습니다. sveltekit이 디렉토리 기반 라우팅을 선택한 후 변경된 사항입니다. 나는 이미 sveltekit의 모든 주요 변경 사항에 대한 요약 게시물을 만들었습니다.

부하 기능을 정의하는 새로운 방법

sveltekit 초기에는 <script>로 추가context=module 태그를 정의하는 데 사용했습니다.

// The old Way

<script context="module" lang="ts">
// Your load function goes here.
</script>
<script lang="ts">
// Your client code goes in here for typescript
<script>

// All html here

<style>
// All css here for the page
<style>

두 개의 스크립트 태그를 갖는 것이 이상하게 만들어 다른 사람들을 혼란스럽게 하는 데 좋으며 sveltekit이 이것을 선택한 더 유용한 이유가 있습니다.

이제 우리는 이미 +page.svelte에서 스크립트 태그를 제거하고 page.ts와 함께 자체 공간(모든 사람이 자신의 개인 공간을 좋아함) 로드 기능을 제공하는 새로운 작업을 쉽게 만드는 디렉토리 기반 라우팅을 가지고 있습니다. Load 기능을 쉽게 정의할 수 있는 곳.

// The new way inside `+page.ts

+import type { PageLoad } from './$types';

export const load: PageLoad = () => {
  // ...
}

기다림 기다림 이것은 그들이 로드 기능에서 만든 유일한 변화가 아닙니다. 이제 그들은 약간 신맛이 나는 것들로 더 나은 것들에 대한 자리를 잡았습니다.

로드 함수에서 값 액세스, 오류 처리 및 리디렉션

이제 로드 기능을 위해 새 파일(+page.ts)이 필요하다는 것을 알고 있지만 클라이언트(+page.svelte)에서 값을 반환하고 액세스하는 방법을 모릅니다.

이 섹션에서 sveltekit은 반환할 소품을 제거하는 좋은 선택을 했습니다. 이제 소품 내부에서 물건을 반환할 필요가 없습니다. 이제 반환할 수 있습니다.return { Sveltekit: 'Release candidate phase' } .

// Old way 
export function load() {
  return {
     props: {
          answer: 42
     }
  };
}

// New way
// +page.ts
export function load() {
  return {
  answer: 42
  };
}

I know you liked it.

이제 우리는 +page.svelte 내부에서 이 반환된 값에 액세스하는 방법 부분에 도달했습니다. 이제 매우 쉽습니다. +page.svelte 의 스크립트 태그export let data;에 새 줄을 추가해야 합니다. 이제 load 함수의 모든 데이터를 사용할 수 있습니다. sveltekit의 load 저장소를 사용하는 $page 함수에서 데이터에 액세스하는 방법이 하나 더 있습니다. 여기에는 현재 페이지와 관련된 모든 데이터가 있습니다. $page.data를 수행하면 load 기능에서 얻은 모든 데이터가 제공됩니다.

// Method 1 inside +page.svelte
<script>
export let data
</script>

<h1> {data.answer} </h1> <!-- 42: value returned from load -->

// Method 2 inside +page.svelte
<script>
  import { page } from '$app/stores';
<script>

<h1> {$page.data.answer} </h1> <!-- 42: value returned from load -->

두 방법 모두 완벽하게 작동하며 만족스럽게 사용할 수 있습니다.

이제 실수를 다른 사람 탓으로 돌리는 것처럼 쉽게 실수를 던질 수 있습니다.

+import { error } from '@sveltejs/kit';
export function load() {
  throw error(400, 'not found');
}

Yup this will give a 400 to user. Error function takes two values. First, status code of error and second is message to be shown.

리디렉션이 오류와 동일합니다.

+import { redirect } from '@sveltejs/kit';
export function load() {
  throw redirect(302, '/');
}

As error, redirects takes two parameters, first is status code and route on which user will be redirected.

이것이 load 함수에서 다루어야 할 전부입니다. 내가 뭔가를 남겼다면 알려주세요.

이것은 내가 당신을 위해 쓰는 것입니다. 묻고 싶은 것이나 제안하고 싶은 것이 있다면 댓글에 적어주세요.