Svelte绑定Store

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.jsimport { writable, derived } from 'svelte/store';

export const name = writable('world');

export const greeting = derived(

name,

$name => Hello ${$name}!

);