Создание компонента тостов с помощью svelte и sveltekit

Читайте, если:

  • Вы хотите узнать о магазинах svelte

Ресурсы:

  • Joy of code’s Svelte State Management Article
  • Стэкблиц по управлению состояниями Svelte от Joy of code
  • Как создать пользовательский компонент оповещения с помощью SvelteKit и TailwindCSS от James Q Quick

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

Введение

В этой статье мы рассмотрим основы работы с Svelte Store, а затем создадим компонент уведомления/тоста.

Svelte/Store

  • Модуль svelte/store экспортирует функции для создания хранилищ readable, writable и derived.

  • Хранилища доступны глобально.

  • Вы можете получить доступ как с помощью реактивного синтаксиса $store, так и с помощью store contract.

Хранилище, доступное для записи

  • Этими хранилищами можно манипулировать извне компонента, и они создаются с дополнительными методами set и update.
store = writable(value?: any)
Вход в полноэкранный режим Выход из полноэкранного режима
  • Set — это метод, который принимает один аргумент — значение, которое нужно установить. Значение store устанавливается в значение аргумента, если значение store еще не равно ему.

  • Update — это метод, принимающий один аргумент, который является обратным вызовом. Обратный вызов принимает в качестве аргумента существующее значение магазина и возвращает новое значение, которое должно быть установлено в магазине.

// import writable from svelte store
import { writable } from 'svelte/store';

// Assign a variable to store
const count = writable(0);

// Adding subscribers to store
count.subscribe(value => {
    console.log(value);
}); // logs '0'

// Setting a new value to store
count.set(1); // logs '1'

// Updating store using set value
count.update(n => n + 1); // logs '2'
Вход в полноэкранный режим Выход из полноэкранного режима

Читаемые

  • Этими магазинами нельзя манипулировать извне компонента.
store = readable(value?: any, start?: (set: (value: any) => void) => () => void)
Войти в полноэкранный режим Выйти из полноэкранного режима

Вот как мы создаем читаемый магазин.

const time = readable(null, set => {
    set(new Date());

    const interval = setInterval(() => {
        set(new Date());
    }, 1000);

    return () => clearInterval(interval);
});
Вход в полноэкранный режим Выход из полноэкранного режима

Производные магазины

  • Производные магазины немного отличаются от двух других. Производные магазины используют другие магазины и затем возвращают вызов обратно.
import { derived } from 'svelte/store';

const doubled = derived(number, $number => $number * 2);

Войти в полноэкранный режим Выход из полноэкранного режима

Как вы видите, здесь используется хранилище number, а затем возвращается его двойник, так что если число изменится, то и производное хранилище тоже.

Это базовое понимание магазинов svelte, теперь мы будем использовать магазин svelte для создания компонента уведомления/тоста.

Компонент тоста

  • Сначала мы создадим магазин уведомлений, затем метод toast будет обновлять уведомления, а метод removeToast будет удалять последнее уведомление через 2 секунды.
// lib/notification.ts

import { writable } from 'svelte/store'

type Notification = string

export const notifications = writable<Notification[]>([])

export function toast(message: string) {
  notifications.update((state) => [message, ...state])
  setTimeout(removeToast, 2000)
}

function removeToast() {
  notifications.update((state) => {
    return [...state.slice(0, state.length - 1)]
  })
}
Вход в полноэкранный режим Выход из полноэкранного режима
  • Теперь мы создадим компонент, который будет использовать магазин svelte, созданный нами выше.
<script lang="ts">
  import { fade } from 'svelte/transition'
  import { notifications } from './notifications'
</script>

{#if $notifications}
  <div class="notifications">
    {#each $notifications as notification}
      <div
        role="alert"
        class="notification"
        transition:fade
      >
        {notification}
      </div>
    {/each}
  </div>
{/if}
Вход в полноэкранный режим Выход из полноэкранного режима

Выше мы перебираем хранилище уведомлений и отображаем доступные уведомления на экране.

  • Теперь мы собираемся использовать этот компонент в нашем проекте.
<script lang="ts">
  import Toast from './toast.svelte'
  import { toast } from './notifications'
</script>

<Toast />

<button on:click={() => toast('🔥 Svelte is fire')}>
  Show notification
</button>
Вход в полноэкранный режим Выход из полноэкранного режима

Выше мы импортировали наш компонент toast и метод toast из уведомления для обновления хранилища и отображения тоста.

Это базовый тост для объяснения магазина, вы можете воспользоваться видеоуроком Джеймса Квика, в котором подробно объясняется создание тоста.

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

Причина позднего сообщения

Я слушал эту песню по кругу, пока писал эту статью 😂

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