svelte 및 sveltekit을 사용하여 토스트 구성 요소 만들기

다음과 같은 경우에 읽으십시오:

날씬한 매장에 대해 배우고 싶습니다

자원:

Joy of code's Svelte State Management Article

Joy of code's Svelte State Management Stackblitz

I have learnt everything from above mentioned resources so if you wanna better understand everything in detail please check them out.

소개

이 기사에서는 svelte store의 몇 가지 기본 사항을 포함하고 알림/토스트 구성 요소를 만들 것입니다.

Svelte/상점

svelte/store 모듈은 readable , writable 및 derived 상점을 만드는 기능을 내보냅니다.

상점은 전 세계적으로 액세스할 수 있습니다.

반응형 $store 구문으로 액세스하거나 store contract 을 사용하여 액세스할 수 있습니다.

쓰기 가능한 저장소

이러한 저장소는 구성 요소 외부에서 조작할 수 있으며 추가 설정 및 업데이트 방법으로 생성됩니다.

store = writable(value?: any)

Set은 설정할 값인 하나의 인수를 사용하는 메소드입니다. 저장 값이 아직 같지 않은 경우 저장 값은 인수 값으로 설정됩니다.

업데이트는 콜백인 하나의 인수를 사용하는 메소드입니다. 콜백은 기존 매장 값을 인수로 사용하고 매장에 설정할 새 값을 반환합니다.

// 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를 사용하고 반환된 값은 두 배이므로 숫자가 변경되면 파생된 저장소도 변경됩니다.

This is some basic understanding of svelte stores now we gonna use svelte store to make a notification/toast component.

토스트 구성 요소

여기서는 먼저 알림 저장소를 만든 다음 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 store를 사용할 구성 요소를 만들겠습니다.

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

Above we are looping through are notification store and displaying the available notifications on the screen.

이제 프로젝트에서 해당 구성 요소를 사용하겠습니다.

<script lang="ts">
  import Toast from './toast.svelte'
  import { toast } from './notifications'
</script>

<Toast />

<button on:click={() => toast('🔥 Svelte is fire')}>
  Show notification
</button>

Above we imported our toast component and toast method from notification to update the store and displaying the toast.

매장 설명을 위한 기본 건배이며, 건배에 대한 심도 있는 설명이 담긴 제임스 큐 퀵의 영상 튜토리얼을 활용하실 수 있습니다.

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

늦게 게시하는 이유

이 글을 쓰면서 이 노래를 반복해서 들었습니다 😂