svelte - 是否可以将 Svelte 商店作为组件的属性传递？

Question

我有一个简单的 REPL example用于简单的列表详细信息编辑器。它由三个部分组成:

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

我已经想出如何连接自定义 Svelte 商店来管理 Array Annotations 的实例数据.我可以通过将商店直接导入 Annotations 来使用它组件并在没有来自顶级 App 的任何 Prop 的情况下调用它成分。但是，我希望能够将商店作为 Annotations 上的属性传递来自 App 的组件 parent ，即<Annotations items={store}/> , 不是 <Annotations/> .

这可能吗？我认为从父组件注入(inject)商店比从组件本身导入商店更灵活/更可测试。我是否在 Java 中使用 Spring 进行了过多的依赖注入(inject)，并且我对 Svelte 模型的思考不正确？

Answer 1

是的，绝对是。这可以很容易地通过对 your REPL 的一些修改来证明。 .

在 App.svelte 中，如您所说:

<Annotations items={annotations} />

在 Annotations.svelte 中，添加 items 属性，并用它替换 annotations 的引用:

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

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

根本没有问题...您可以将任何类型的值作为组件 Prop 传递，没有编码或其他任何东西。

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

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

<svelte:component this={Cmp} />

<!-- or -->

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

但是我离题了，抱歉!所以，这是可能的。现在，这是个好主意吗？我认为您在 Spring 和依赖注入(inject)方面的经验完全可以转移到这里。它确实会让你的组件更灵活、更可测试，但代价是更多的样板文件。在某些情况下，这种折衷是好的，而在某些情况下则不好。

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

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

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

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

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

总而言之，除了明确规定的原语契约( Prop 、商店、上下文......)之外，你对 Svelte 允许你做的事情没有太多限制。这让您可以想象或重用来自其他框架的技术，在成本和 yield 方面产生大致相似的结果。