$ 的简化语法：将语句标记为反应式

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 对象 - 没有这个我的 store 命名为 list 将不会更新.

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

PS,如果可以使用export let c, name;而不丢失store更新，请具体说明如何操作。

Answer 1

就目前而言，您目前没有在您的on:click处理程序中更新您的list商店。事实上，除了初始化它或使用依赖于另一个商店的奇怪机制将元素设置为零之外，您没有其他方法可以 set/update 您的 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}

See REPL（添加 list 商店控制台登录 App.svelte 以实际跟踪商店更新）

Answer 2

如果你想在响应式语句中解构变量，只需将语句括在括号中即可：

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

在此处了解更多信息：object destructuring without var

$ 的简化语法：将语句标记为反应式

Simplified syntax for $: marks a statement as reactive

svelte

svelte-store

svelte-3