Пример, похожий на счет-фактуру, чтобы понять реактивность вложенного объекта в массивы. Стоит ли использовать для этого магазин?

Question

Я изо всех сил стараюсь понять идиоматический c способ создания формы, подобной счету-фактуре, с помощью Svelte 3.

Мой REPL здесь: https://svelte.dev/repl/7aca36569aea49bba38e5fb8b1b0835b?version=3.24.1.

ВОПРОСЫ :

1. Это хороший способ сделать это? Стоит ли мне использовать магазин?

2. Есть ли способ обновить amountDue при изменении qty и price своих строк? (Я знаю, что могу сделать это с помощью rows = rows, но мне кажется, что это немного не идиоматично c, я ошибаюсь?)

Answer 1

Если вам нужен более полный ответ:

1. Нет необходимости использовать магазин. Обычно это происходит, когда вы хотите связать несколько компонентов.
2. Как было предложено ранее, вы должны привязать значение row к свойству row строки. Вы можете использовать ярлык bind:row в качестве псевдонима bind:row={row}.
3. Незначительный: Лог c для вычисления amountDue total кажется ошибочным, так как он игнорирует количество строк для рассчитайте общую цену.

Вот рабочий REPL с желаемым поведением: https://svelte.dev/repl/78fa09646005441a85061e6edf9886f9?version=3.24.1

Answer 2

Я не думаю, что вам нужно использовать хранилище (возможно, полезно для большого дерева компонентов)

Для второго вопроса вам просто нужно выполнить привязку компонентов

https://svelte.dev/tutorial/component-bindings

{#each rows as row}
    <Row bind:row />
{:else}
    Still no rows.
{/each}

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