Skip to main content

store が書き込み可能、つまり set メソッドを持っている場合は、ローカルコンポーネントの状態にバインドするのと同じように、store の値にバインドできます。

この例では、書き込み可能な store である name と、derived store である greetingstores.js でエクスポートしています。App.svelte<input> 要素を以下のように更新してください:

App.svelte
<input bind:value={$name}>

入力値を変更すると name とそれに依存しているもの全てが更新されます。

また、コンポーネント内で store の値に直接代入することもできます。name を更新するための on:click イベントハンドラを追加してください:

App.svelte
<button on:click={() => $name += '!'}>
	Add exclamation mark!
</button>

$name += '!' の代入は name.set($name + '!') と同等です。

Next: Advanced Svelte

1
2
3
4
5
6
7
8
9
10
<script>
	import { name, greeting } from './stores.js';
</script>
 
<h1>{$greeting}</h1>
<input value={$name} />
 
<button>
	Add exclamation mark!
</button>
initialising