Stores
Not all application state belongs inside your application's component hierarchy. Sometimes, you'll have values that need to be accessed by multiple unrelated components, or by a regular JavaScript module.
In Svelte, we do this with stores. A store is simply an object with a subscribe
method that allows interested parties to be notified whenever the store value changes. In App.svelte
, count
is a store, and we're setting count_value
in the count.subscribe
callback.
Click the stores.js
tab to see the definition of count
. It's a writable store, which means it has set
and update
methods in addition to subscribe
.
Now go to the Incrementer.svelte
tab so that we can wire up the +
button:
function increment() {
count.update(n => n + 1);
}
Clicking the +
button should now update the count. Do the inverse for Decrementer.svelte
.
Finally, in Resetter.svelte
, implement reset
:
function reset() {
count.set(0);
}
xxxxxxxxxx
<script>
import { count } from './stores.js';
import Incrementer from './Incrementer.svelte';
import Decrementer from './Decrementer.svelte';
import Resetter from './Resetter.svelte';
let count_value;
const unsubscribe = count.subscribe(value => {
count_value = value;
});
</script>
<h1>The count is {count_value}</h1>
<Incrementer/>
<Decrementer/>
<Resetter/>
Console
xxxxxxxxxx
/* App.svelte generated by Svelte v3.23.2 */
import {
SvelteComponent,
append,
create_component,
destroy_component,
detach,
element,
init,
insert,
mount_component,
safe_not_equal,
set_data,
space,
text,
transition_in,
Compiler options
xxxxxxxxxx
/* Add a <style> tag to see compiled CSS */