Svelte Store

시작

• Svelte도 React의 redux나 vue의 store와 같이 상태 변화를 관리하는 기능으로 store라는 것이 존재 한다.
• 기본적으로 RXJS(https://rxjs.dev/guide/overview)를 보는듯한 느낌을 강하게 받을 수 있다.
• https://svelte.dev/tutorial/writable-stores

Stores / Writable stores • Svelte Tutorial

 

• 일반 기본 프로젝트를 설정하자
  • https://madfishdev.tistory.com/31?category=855358

코드

• 간단하게 Store를 사용해보는 코드
• store.ts 파일을 만들고 아래와 같이 writeable 객체를 하나 생성하고, 0값으로 초기화 한다.

import {writable} from 'svelte/store';

export const chaneNumber = writable(0);

• 이제 이 객체를 import하여 changeNumber의 값이 변경됨을 추적할 수 있게 되었다.

 

• App.svelte에서 이제 changeNumber를 화면에 표기 하고, 변경하는 Code를 작성한다.

  <script lang="ts">
  	import { chaneNumber } from './store';
  	
  	export const onClickSetButton = () => {
  		chaneNumber.set(10);
  	}
  
  	export const onClickUpdateButton = () => {
  		chaneNumber.update( value => value + 8)
  	}
  	export let num;
  
  	chaneNumber.subscribe(value => {
  		num = value;
  	});
  </script>
  
  <main>
  	<h1>Hello Basic Store{chaneNumber}!</h1>
  	<p>{num}</p>
  	<button on:click={onClickSetButton}>Set Button</button>
  	<button on:click={onClickUpdateButton}>Update Button</button>
  </main>
  
  <style>
  	main {
  		text-align: center;
  		padding: 1em;
  		max-width: 240px;
  		margin: 0 auto;
  	}
  
  	h1 {
  		color: #ff3e00;
  		text-transform: uppercase;
  		font-size: 4em;
  		font-weight: 100;
  	}
  
  	@media (min-width: 640px) {
  		main {
  			max-width: none;
  		}
  	}
  </style>​

• changeNumber.subscribe에 콜백함수를 등록하여 값이 변경될 때 마다, 변경된 값을 콜백 한수를 통해 업데이트 할 수 있데 되었다.
• 참고로, app이 처음 실행로드 되었을때 앞서 초기화한 (0) 값으로 한번 콜백이 호출됨을 잊지 말고, 초기값 설정과 사용에 추의 해야 된다.
  • 예를 들어 App 컴포넌트에서 num = 10으로 설정하여도, changeNumber.subscribe 가 app로딩후 한번 호출되며 0값을 내주기 때문에, num=0으로 변경된다.
• changeNumber.set: changeNumber.set값을 넣어 변경한다.
• changeNumber.update: update는 change와 다르게 현재 callback을 사용하며, callback 호출시 changeNumber.update에 콜백 파라미터로 changeNumber의 현재 값이 넘어온다. 즉 현재 값을 확인한 후 업데이트 시켜주는 역할을 한다.
• 이제 이 두함수로 값을 변경하는 경우 changeNumber.subscribe 하고 있는 모든 component의 콜백이 호출된다.

 

sample code

https://github.com/MadfishDT/svelte-basic/tree/master/store