codecamp

Svelte 绑定Store

如果 store可写入的(即具有set方法),则可以绑定其值,就像可以绑定局部组件状态一样。

在此示例中,我们有一个可写 storename和一个派生store greeting,尝试更改<input>标签:

<input bind:value={$name}>

现在,更改name的输入值 ,其值和依赖项都将获得更新。

我们还可以直接分配store值在组件内部,尝试添加<button> 标签:

<button on:click="{() => $name += '!'}">
	Add exclamation mark!
</button>

此处 $name += '!' 相当于 name.set($name + '!')

示例代码

  • App.svelte

<script>
	import { name, greeting } from './stores.js';
</script>

<h1>{$greeting}</h1>
<input value={$name}>

  • stores.js

import { writable, derived } from 'svelte/store';

export const name = writable('world');

export const greeting = derived(
	name,
	$name => `Hello ${$name}!`
);


Svelte 自定义 stores
Svelte Tweened
温馨提示
下载编程狮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; }