Изменения в Sveltekit: Функция загрузки


Введение

В этой статье я расскажу вам о новых изменениях в функции load фреймворка sveltekit. Как она изменилась после того, как sveltekit выбрал маршрутизацию на основе каталогов. Я уже сделал краткий обзор всех изменений в sveltekit Sveltekit Braking changes: Маршрутизация, Нагрузка и новый способ определения конечных точек тени.

Новый способ определения функции нагрузки

В ранних версиях 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 выбрал именно это.

Теперь у нас уже есть маршрутизация на основе директорий, что облегчает работу над новой вещью, которая заключается в удалении тега script из +page.svelte и предоставлении функции load собственного пространства (Каждый любит свое личное пространство) с page.ts. Где вы можете легко определить свою функцию Load.

// The new way inside `+page.ts

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

export const load: PageLoad = () => {
  // ...
}
Вход в полноэкранный режим Выход из полноэкранного режима

Подождите, это не единственное изменение, которое они сделали в функции Load. Теперь у них есть несколько лучших вещей с небольшими недостатками.

Доступ к значению, обработка ошибок и перенаправление в функции Load

Теперь мы знаем, что нам нужен новый файл(+page.ts) для функции load, но мы не знаем, как вернуть значения и получить к ним доступ в нашем клиенте(+page.svelte).

В этом разделе sveltekit сделал хороший выбор, убрав реквизит return. Теперь вам не нужно возвращать вещи внутри реквизита, теперь вы можете вернуть их просто

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

// New way
// +page.ts
export function load() {
  return {
  answer: 42
  };
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Я знаю, вам понравилось.

Теперь мы переходим к тому, как получить доступ к этому возвращаемому значению внутри нашего +page.svelte. Теперь все очень просто, нужно добавить новую строку в тег скрипта +page.svelte export let data;. Вот и все, теперь вы можете использовать все данные из функции load. Есть еще один способ получить доступ к данным из функции load, который заключается в использовании хранилища $page из sveltekit. В нем есть все данные, относящиеся к текущей странице. Просто сделайте $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 это даст пользователю сообщение 400. Функция Error принимает два значения. Первое, status code ошибки и второе, message, которое должно быть показано.

  • Перенаправления такие же, как и ошибки.
+import { redirect } from '@sveltejs/kit';
export function load() {
  throw redirect(302, '/');
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Как и ошибка, перенаправления принимают два параметра, первый — код состояния и маршрут, по которому будет перенаправлен пользователь.

Это все, что нам нужно описать в функции load. Если я что-то упустил, дайте мне знать.

Это я пишу для вас. Если вы хотите что-то спросить или предложить, пожалуйста, напишите это в комментариях.

Оцените статью
devanswers.ru
Добавить комментарий