Svelte 앱에 공유 상태 저장하기

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Svelte는 프론트 엔드 웹 앱 개발을 위한 떠오르는 프론트 엔드 프레임워크입니다.

사용이 간편하고 결과를 빠르게 생성할 수 있습니다.

이 기사에서는 Svelte 저장소에 공유 상태를 저장하는 방법을 살펴보겠습니다.

쓰기 가능한 저장소

여러 구성 요소에서 공유하는 데이터를 저장하기 위해 쓰기 가능한 저장소를 추가할 수 있습니다.

예를 들어 다음을 작성하여 저장소를 만들고 구성 요소에서 사용할 수 있습니다.
App.svelte  :

<script>
  import { count } from "./stores.js";

  let countValue;

  const unsubscribe = count.subscribe(value => {
    countValue = value;
  });

  const increment = () => {
    count.update(n => n + 1);
  };
</script>

<button on:click={increment}>Increment</button>
<p>{countValue}</p>

stores.js  :

import { writable } from "svelte/store";

export const count = writable(0);

위의 코드에서 stores.js 라고 하는 count 공유 쓰기 가능 상태를 만들었습니다.

그런 다음 최신 값을 가져오고 count_value 로 설정하기 위해 구독했습니다.
set에서 count 메서드를 호출하여 다음과 같이 값을 재설정할 수도 있습니다.
App.svelte  :

<script>
  import { count } from "./stores.js";

  let countValue;

  const unsubscribe = count.subscribe(value => {
    countValue = value;
  });

  const increment = () => {
    count.update(n => n + 1);
  };

  const reset = () => {
    count.set(0);
  };
</script>

<button on:click={increment}>Increment</button>
<button on:click={reset}>Reset</button>
<p>{countValue}</p>

위의 코드에서 재설정을 클릭하여 count.set(0) 상태를 0으로 설정할 때 count를 실행합니다.

상태 구독에 사용되는 리소스를 해제할 수 있도록 구성 요소가 파괴될 때 저장소에서 unsubscribe를 호출해야 합니다.

예를 들어 위의 예를 다음과 같이 수정할 수 있습니다.
App.svelte  :

<script>
  import { count } from "./stores.js";
  import { onDestroy } from "svelte";

  let countValue;

  const unsubscribe = count.subscribe(value => {
    countValue = value;
  });

  const increment = () => {
    count.update(n => n + 1);
  };

  onDestroy(unsubscribe);
</script>

<button on:click={increment}>Increment</button>
<p>{countValue}</p>

위의 코드는 unsubscribe 상태가 더 이상 구독되지 않도록 구성 요소 수명 주기의 destroy 부분에서 함수를 호출count합니다.

스토어 상태 구독을 $  로 대체할 수 있습니다. 예를 들어 위의 예를 다음과 같이 줄일 수 있습니다.

<script>
  import { count } from "./stores.js";
  import { onDestroy } from "svelte";

  const increment = () => {
    count.update(n => n + 1);
  };
</script>

<button on:click={increment}>Increment</button>
<p>{$count}</p>

count 저장소에서 구독 및 구독 취소하는 코드를 제거했으며 구성 요소는 여전히 이전과 동일하게 작동합니다.

읽기 전용 상점

readable 함수로 읽기 전용 스토어를 만들 수 있습니다.

예를 들어 다음 코드를 작성하여 다음과 같이 구성 요소가 구독하는 카운터 상태를 만들 수 있습니다.
stores.js  :

import { readable } from "svelte/store";

export const count = readable(0, set => {
  let count = 0;
  const interval = setInterval(() => {
    set(count);
    count++;
  }, 1000);

  return () => {
    clearInterval(interval);
  };
});

App.svelte  :

<script>
  import { count } from "./stores.js";
</script>

<p>{$count}</p>

위의 코드에서는 상점에서 readable 함수를 호출합니다. 두 번째 인수에서 set 함수를 매개변수로 사용하여 콜백을 전달합니다. 이 함수는 상점 값을 업데이트하기 위해 호출됩니다.
setInterval 콜백에서 그렇게 했습니다. 그런 다음 상점이 구독 취소될 때 코드를 정리하는 데 사용되는 다른 함수를 반환합니다.

코드를 실행하면 화면에 1초마다 1씩 증가하는 숫자가 표시됩니다.

파생된 상태로 저장

derived 함수를 호출하여 다른 상태에서 파생된 저장소를 만들 수 있습니다.

예를 들어 다음과 같이 위에 있는 count 상태의 두 배인 값을 내보내는 저장소를 만들 수 있습니다.
stores.js  :

import { readable, derived } from "svelte/store";

export const count = readable(0, set => {
  let count = 0;
  const interval = setInterval(() => {
    set(count);
    count++;
  }, 1000);

  return () => {
    clearInterval(interval);
  };
});

export const doubleCount = derived(count, $count => $count * 2);

App.svelte  :

<script>
  import { count, doubleCount } from "./stores.js";
</script>

<p>{$count}</p>
<p>{$doubleCount}</p>

위의 코드에는 doubleCount 저장소가 있습니다. 이 저장소는 첫 번째 인수로 전달된 derived 저장소와 값에서 파생하려는 값을 반환하는 콜백으로 count 함수를 호출하여 생성됩니다. count에서 두 번째 인수로 내보냅니다.

그런 다음 우리는 1초마다 1씩 증가하는 숫자와 1초마다 2씩 증가하는 숫자를 봅니다.

스토어 바인딩

저장소가 쓰기 가능한 경우 저장소의 값에 직접 바인딩할 수 있습니다.

예를 들어 bind:value를 사용하여 입력된 값에 직접 상점을 바인딩하고 다음과 같이 상점의 값을 조작할 수 있습니다.
store.js  :

import { writable } from "svelte/store";

export const name = writable("");

App.svelte  :

<script>
  import { name } from "./stores.js";
</script>

<input bind:value={$name}>
<button on:click="{() => $name += '.'}">
  Add period
</button>
<p>{$name}</p>

위의 코드에서 입력에 무언가를 입력할 때와 마침표 추가를 클릭할 때 $name 값을 변경합니다.

그런 다음 p 요소에 $name 저장소의 값을 표시합니다.

결론

저장소는 공유 상태를 저장하는 데 편리합니다. 우리는 읽기 전용, 쓰기 가능 또는 다른 저장소에서 파생된 저장소를 만듭니다.