1

如何简化$:代码？：

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

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

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

4

2 回答 2

2

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

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

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

于 2020-05-08T09:59:25.750 回答
1

就目前而言，您目前没有在处理程序中更新您的list商店on:click。事实上，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（list在 App.svelte 中添加了商店控制台日志以实际跟踪商店更新）

于 2020-05-05T23:51:45.600 回答