Skip to main content

If a store is writable — i.e. it has a set method — you can bind to its value, just as you can bind to local component state.

In this example we're exporting a writable store name and a derived store greeting from stores.js. Update the <input> element in App.svelte:

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

Changing the input value will now update name and all its dependents.

We can also assign directly to store values inside a component. Add an on:click event handler to update name:

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

The $name += '!' assignment is equivalent to 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