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 => {
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 => n - 1);
}
</script>
</button>Incrementer.svelte<script>
import { count } from './stores.js';
function increment() { count.update(n => 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);