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.js

import { writable } from 'svelte/store';

export const count = writable(0);