Skip to main content
Basic Svelte
Introduction
Reactivity
Props
Logic
Events
Bindings
Classes and styles
Actions
Transitions
Advanced Svelte
Advanced reactivity
Reusing content
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
Forms
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Hooks
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion

Svelte 5 でルーンが導入される前は、ストアはコンポーネント外部のリアクティブ状態を処理するための慣用的な方法でした。これはもう当てはまりませんが、Svelte (現時点では SvelteKit も含む) を使用するときにはまだストアに遭遇することになるため、その使い方を知っておくことは価値があります。

独自のカスタム ストアを作成する方法については説明しません。その場合は、ドキュメントを参照してください。

ユニバーサル リアクティビティ 演習の例をもう一度見てみましょう。ただし、今回はストアを使用して共有状態を実装します。

shared.js では、数値である count をエクスポートしています。これを書き込み可能なストアに変換します。

shared
import { writable } from 'svelte/store';

export const count = writable(0);

ストアの値を参照するには、先頭に $ 記号を付けます。Counter.svelte で、<button> 内のテキストを更新して、[object Object] と表示されないようにします。

Counter
<button onclick={() => {}}>
	clicks: {$count}
</button>

最後に、イベント ハンドラーを追加します。これは書き込み可能なストアなので、set または update メソッドを使用してプログラムで値を更新できます...

count.update((n) => n + 1);

...ただし、コンポーネント内にいるので、$ プレフィックスを引き続き使用できます。

Counter
<button onclick={() => $count += 1}>
	clicks: {$count}
</button>

Edit this page on GitHub

1
2
3
4
5
6
7
8
<script>
	import Counter from './Counter.svelte';
</script>
 
<Counter />
<Counter />
<Counter />