はじめに

タイムテーブルメーカーという、1日のタイムテーブルを手軽に作成できるツールを作りました。

ページはこちら

Astroのサイト内にSvelteのコンポーネントを設置して実装しています。 その際にコンポーネント間で状態を共有する必要が出てきたので、SvelteのStore機能を使った方法が簡単だったので紹介します。

Storeとは

StoreとはSvelteの組み込みの状態管理のための機能です。

writable, readable, derivedという3つの関数を使って複数のコンポーネント間で共有するストアを作成し、監視・更新するための仕組みを提供します。 これにより、アプリケーション内でのデータフローを効率的に管理することができます。

writable()

外のコンポーネントから書き換えが可能なストアを作成します。

readable()

外のコンポーネントからは書き換えができない読み取り専用のストアを作成します。

drived()

他のストアから計算される値を表します。たとえば、2つの数値の合計を保持するストアを作成し、その値が変更されたときに自動的に再計算されるストアを作成することができます。

実際の使い方

ストアを作成したら、外のコンポーネントでインポートします。ストアの値は、$変数名とすることで使用することができます。

また、writableなストアは.set()や.update()などのメソッドで中身を更新することもできます。

// store.js ストアを作成する
import { writable, derived } from 'svelte/store'

// Writable storeを作成、（0）は初期値
export const count = writable(0)

// Derived storeを作成
export const doubleCount = derived(count, ($count) => $count * 2)

<script>
  import { count, doubleCount } from './store.js'

  // storeの更新
  count.set(10)
</script>

// App.svelte ストアを使用する
<h1>{$count}</h1>
<p>Double Count: {$doubleCount}</p>

上記の例では、doubleCountがderivedで定義されていてcountの値に依存しているので、countが更新されるたびにdoubleCountの値もリアルタイムで変更されます。

おわりに

まだ複雑なことはしていませんが、Svelteの状態管理はシンプルで使いやすかったです。

以上

参考

svelte/store • Docs • Svelte