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}!`
);