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 => {
    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 on:click={decrement}>

</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);