是否可以将 Svelte 存储作为组件的属性传递？

Question

我有一个简单的列表细节编辑器的简单REPL 示例。它由三个部分组成：

1. Annotation 是细节
2. Annotations遍历数据并创建Annotation实例
3. App 是创建 Annotations

我已经想通了如何把一个自定义斯维尔特店管理Array实例数据的Annotations。我可以通过将 store 直接导入到Annotations组件中并在没有来自顶级App组件的任何道具的情况下调用它来使用它。但是，我希望能够将 store 作为Annotations来自App父级的组件的属性传入，即<Annotations items={store}/>不是<Annotations/>。

这可能吗？我认为从父组件注入 store 比从组件本身导入它更灵活/可测试。我是否在 Java 中对 Spring 进行了过多的依赖注入，并且我错误地考虑了 Svelte 模型？

Answer 1

是的，一点没错。这可以通过对REPL的一些修改轻松演示。

在App.svelte，正如你所说：

<Annotations items={annotations} />

在 中Annotations.svelte，添加items道具，并annotations用它替换引用：

<script>
  export let items = []
  ...
  items.addStuff(...);
</script>

{#each $items as annotation}
  ...
{/each}

根本没有任何问题......您可以将任何类型的值作为组件道具传递，没有编组或其他任何内容。

如果您愿意，您甚至可以传递其他组件！

<script>
  export let Cmp // yes, can change at runtime, reactive!
</script>

<svelte:component this={Cmp} />

<!-- or -->

{#if Cmp}
  <Cmp />
{/if}

但我跑题了，对不起！所以，这是可能的。现在，这是个好主意吗？我认为你在 Spring 和依赖注入方面的经验完全转移到这里。它确实会让你的组件更灵活、更可测试，但代价是更多的样板。在某些情况下，这种权衡是好的，而有些则是坏的。

就我个人而言，我认为这种模式通常利大于弊。

需要考虑的一件事是，当您将 store 直接导入到组件中时，您会使其成为一种单例数据。即使您可以在屏幕上呈现组件的多个实例，它们也必须使用完全相同的数据。另一方面，当 store 通过 prop 传递时，您可以在不同的 store 中重用相同的组件（显然）。您甚至可以在运行时交换组件使用的存储，而无需重新创建组件！所以，就像你说的，更灵活。

这种做法产生的一个问题是，您必须决定将商店导入到何处。哪些组件将负责拥有商店，而不是仅仅消费它们？您可以通过道具手动传递商店的深度是多少？用 React 的说法，我们可能会说“哑组件”与“容器”。这里有一个真正的问题（和辩论），它不是 Svelte 特有的，并且根据您问的对象或项目类型得到不同的答案。

要考虑的另一种选择是，您可以将商店放入context 中，因此您不必将它们传递到整个组件层次结构中。另一方面，数据流变得更难跟踪，即使良好的命名和一致的模式确实可以缓解这个问题。

您可以考虑的另一种技术是拥有商店的商店......

总而言之，您对 Svelte 允许您执行的操作没有太多限制，除了其原语（道具、商店、上下文...）的明确规定的合同之外。这让您可以想象或重用来自其他框架的技术，在成本和收益方面具有大致相似的结果。