Svelte 可写存储

2023-02-21 15:45 更新

并非所有的应用程序状态都属于你的应用程序的组件层次结构。有时,你会有一些值需要被多个不相关的组件或普通的 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);


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号