Svelte可写存储

Svelte 可写存储

并非所有的应用程序状态都属于你的应用程序的组件层次结构。有时,你会有一些值需要被多个不相关的组件或普通的 JavaScript 模块访问。在 Svelte 中,我们通过 stores 来做到这一点。 store 只是一个带有 ​subscribe​ 方法的对象,只要 store 值发生变化,就可以通知感兴趣的各方。在 ​App.svelte​ 中,​count​ 是一个 store,我们在 ​count.subscribe​ 回调中设置 ​count_value​。在 ​stores.js​ 中查看 ​count​ 的定义。它是一个可写 ​store​,这意味着它除了 ​subscribe​ 之外还有 ​set​ 和 ​update​ 方法。现在来到 ​Incrementer.svelte​ 中,来写增加按钮的逻辑:function increment() {

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

}单击 ​+​ 按钮现在应该更新计数。对 ​Decrementer.svelte​ 执行相反的操作。最后,在 ​Resetter.svelte​ 中,实现重置:function reset() {

count.set(0);

}示例代码App.svelte<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 =&gt; {

count_value = value;

});

</script>

<h1>The count is {count_value}</h1>

<Incrementer/>

<Decrementer/>

<Resetter/>Decrementer.svelte<script>

import { count } from './stores.js';

function decrement() {

count.update(n =&gt; n - 1);

}

</script>

<button on:click={decrement}>

</button>Incrementer.svelte<script>

import { count } from './stores.js';

function increment() {

count.update(n =&gt; n + 1);

}

</script>

<button on:click={increment}>

+

</button>Resetter.svelte<script>

import { count } from './stores.js';

function reset() {

count.set(0);

}

</script>

<button on:click={reset}>

reset

</button>stores.jsimport { writable } from 'svelte/store';

export const count = writable(0);