Svelte 绑定Store
如果 store可写入的(即具有set方法),则可以绑定其值,就像可以绑定局部组件状态一样。
在此示例中,我们有一个可写 store:name和一个派生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}!`
);