Svelte - 컴포넌트간 변수 상태 공유

Svelte 공식문서의 Part 1 - Stores - Writable stores 부분이다.

 

스벨트에서 store를 사용하여 여러 컴포넌트 간 변수 상태를 공유하는 방법에 관한 내용인데

 

핵심은 변수를 subscribe 하여 값의 변경을 감지 하는 것이다.

 

// stores.js
import { writable } from 'svelte/store';

// 초기 값은 0
export const count = writable(0);

 

stores.js 부분으로 writable store로 초기값은 0으로 설정 하고

 

// App.svelte
<script>
	import { count } from './stores.js';
	import Incrementer from './Incrementer.svelte';
	import Decrementer from './Decrementer.svelte';
	import Resetter from './Resetter.svelte';

	let count_value =0;

	count.subscribe((value) => {
		count_value = value;
	});
</script>

<h1>The count is {count_value}</h1>

<Incrementer />
<Decrementer />
<Resetter />

 

App.svelte에서는 count.subscribe로 값 변경을 감지 한다.

 

// Incrementer.svelte
<script>
  import { count } from './stores.js';

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

<button on:click={increment}>+</button>

 

Incrementer.svelte 부분에서는 다음과 같이 update를 사용하여 n+1을 적용하였다.

 

마찬가지로 Decrementer.svelte에서는 + 1 부분만 -1로 변경하면 된다.

 

// Resetter.svelte
<script>
	import { count } from './stores.js';

	function reset() {
		// TODO reset the count
		count.set(0);
	}
</script>

<button on:click={reset}>
	reset
</button>

 

Resetter.svelte에서는 set(0)으로 값을 0으로 재설정 하는 부분을 작성하면 된다.

 

c#의 mvvm 패턴과 유사한 개념을 가지고 있는거 같은데 svelte에서는 컴포넌트 자체가 view와 viewmodel을 함께

 

수행해서 좀 더 모듈화된 전통적인 mvvm과는 다른거 같다.