codecamp

Svelte 自动订阅

前面的例子中的应用程序可以工作,但有一个微妙的错误--​unsubscribe​函数从未被调用。如果该组件被多次实例化和销毁,这将导致内存泄漏。

修复它的一种方法是使用 ​onDestroy​ 生命周期钩子:

<script>
	import { onDestroy } from 'svelte';
	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;
	});

	onDestroy(unsubscribe);
</script>

<h1>The count is {count_value}</h1>

不过,它开始变得有点样板化,尤其是当您的组件订阅了多个 ​stores​ 时。相反,Svelte 有一个小窍门——你可以通过在 ​store​名称前加上 ​$​ 来引用 ​store​值:

<script>
	import { count } from './stores.js';
	import Incrementer from './Incrementer.svelte';
	import Decrementer from './Decrementer.svelte';
	import Resetter from './Resetter.svelte';
</script>

<h1>The count is {$count}</h1>

自动订阅仅适用于在组件的顶级范围内声明(或导入)的存储变量。

您也不限于在标记内使用 ​$count​ — 您也可以在 ​<script>​ 的任何地方使用它,例如在事件处理程序或响应式声明中。

任何以 ​$​ 开头的名称都被假定为引用 store 值。它实际上是一个保留字符——Svelte 会阻止您使用 ​$​ 前缀声明自己的变量。


Svelte 可写存储
Svelte 只读 stores
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Svelte module context

Svelte 调试

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }