类似发票的示例，用于了解数组中嵌套对象的反应性。我应该为此使用商店吗？

Question

我正在尽力理解使用 Svelte 3 创建类似发票的表单的惯用方法。

我的 REPL 在这里：https://svelte.dev/repl/7aca36569aea49bba38e5fb8b1b0835b?version=3.24.1.

问题:

1. 这样做好吗？我应该使用商店吗？

2. 当我更改行的 qty 和 price 时，是否有更新 amountDue 的方法？ （我知道我可以用 rows = rows 来做到这一点，但在我看来这有点不合时宜，我错了吗？）

Answer 1

我认为您不需要使用商店（可能对大型组件树有用）

第二个问题，你只需要做一个组件绑定

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

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

注意我们如何使用 bind 关键字而不是仅仅传递 prop

Answer 2

如果您需要更完整的答案：

1. 无需使用商店。当您想要通信多个组件时，通常就是这种情况。
2. 如前所述，您应该将 row 值绑定到行的 row 属性。您可以使用快捷方式 bind:row 作为 bind:row={row}.
的别名
3. 次要：计算amountDue总价的逻辑似乎有缺陷，因为它忽略了行数量来计算总价。

这是一个具有所需行为的工作 REPL：https://svelte.dev/repl/78fa09646005441a85061e6edf9886f9?version=3.24.1