Svelte 可寫(xiě)存儲(chǔ)

并非所有的應(yīng)用程序狀態(tài)都屬于你的應(yīng)用程序的組件層次結(jié)構(gòu)。有時(shí)，你會(huì)有一些值需要被多個(gè)不相關(guān)的組件或普通的 JavaScript 模塊訪問(wèn)。

在 Svelte 中，我們通過(guò) stores 來(lái)做到這一點(diǎn)。 store 只是一個(gè)帶有 ?subscribe? 方法的對(duì)象，只要 store 值發(fā)生變化，就可以通知感興趣的各方。在 ?App.svelte? 中，?count? 是一個(gè) store，我們?cè)?nbsp;?count.subscribe? 回調(diào)中設(shè)置 ?count_value?。

在 ?stores.js? 中查看 ?count? 的定義。它是一個(gè)可寫(xiě) ?store?，這意味著它除了 ?subscribe? 之外還有 ?set? 和 ?update? 方法。

現(xiàn)在來(lái)到 ?Incrementer.svelte? 中，來(lái)寫(xiě)增加按鈕的邏輯：

function increment() {
	count.update(n => n + 1);
}

單擊 ?+? 按鈕現(xiàn)在應(yīng)該更新計(jì)數(shù)。對(duì) ?Decrementer.svelte? 執(zhí)行相反的操作。

最后，在 ?Resetter.svelte? 中，實(shí)現(xiàn)重置：

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