Упрощенный синтаксис для $: помечает инструкцию как реактивную - PullRequest
Новая
       48

Упрощенный синтаксис для $: помечает инструкцию как реактивную

1 голос
/ 06 мая 2020

Как упростить $: код?:

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, укажите, как сделай это.

Ответы [ 2 ]

2 голосов
/ 08 мая 2020

Если вы хотите деструктурировать переменную в реактивном операторе, просто заключите оператор в круглые скобки:

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

Подробнее здесь: деструктуризация объекта без var

1 голос
/ 06 мая 2020

В настоящее время вы не обновляете свое 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 для фактического отслеживания обновлений магазина)

...