$ 的简化语法:将语句标记为响应式

Question

如何简化$:代码？

Symbol.svelte

<script>
export let symbol;
$:c = symbol.c;
$:name = symbol.name;
$:{console.log("log Symbol", name, c)}
</script>
<div on:click={()=>symbol.c=0} >
{name} {c}
</div>

我梦见这样的事情：

export let symbol;
$:{c,name} = symbol;

我不能使用...

export let c,name;

。因为on:click我必须用symbol.c = 0修改symbol对象 - 没有这个，我名为list的store将不会更新。

整个示例：https://svelte.dev/repl/37e3a1fa96fc4f1dbc7cfcafb1edc439?version=3.22.1

PS，如果您可以使用export let c, name;而不会丢失store更新，请指定如何操作。

Answer 1

如果要解构反应语句中的变量，只需将语句括在括号中：

$: ({ c, name } = symbol);

在此处了解更多信息：没有 var 的对象解构

Answer 2

就目前而言，您当前没有在on:click处理程序中更新list存储。事实上，除了初始化它或使用依赖于另一个存储的奇数机制将元素设置为零之外，您没有其他方法来设置/更新list存储。

老实说，我对你的商店没有多大意义，但是尽管如此，使用您设计的商店并利用其现有方法，以下内容将起作用并实际更新您的商店：

Symbol.svelte

<script>
import { list, inputSymbol } from './stores.js';
export let c, name
$:console.log("log Symbol", name, c)
</script>
<div on:click={() => {
inputSymbol.set(name)
list.setToZero()
}}>
{name} {c}
</div>

App.svelte

...
{#each $list as symbol (symbol.name)}
<Symbol {...symbol}/>
{/each}

请参阅 REPL(listApp.svelte 中的商店控制台登录中添加以实际跟踪商店更新)