是否可以在组件上将 Svelte 商店作为属性传递？

Question

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

Annotation是细节
Annotations 遍历数据并创建 Annotation 个实例
App 是创建 Annotations

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

这可能吗？我认为从父组件注入商店比从组件本身导入它更 flexible/testable。我是否在 Java 中使用 Spring 进行了过多的依赖注入，并且我在错误地考虑 Svelte 模型？

Answer 1

似乎有效...

在App.svelte
变化：
<Annotations
至
<Annotations annotations={annotations}/>

在Annotations.svelte
移除：
import { annotations } from './state.js';
添加：
export let annotations = [];

REPL
这就是您要找的吗？

Answer 2

是的，绝对是。这可以通过 your 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 由 prop 传递时，您可以在不同的 store 中重用相同的组件（很明显）。您甚至可以在运行时交换组件使用的存储，而无需重新创建组件！所以，就像你说的，更灵活。

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

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

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

总而言之，除了明确规定的原语契约（道具、商店、上下文……）之外，您对 Svelte 允许您做的事情没有太多限制。这使您可以想象或重用其他框架中的技术，在成本和收益方面产生大致相似的结果。

是否可以在组件上将 Svelte 商店作为 属性 传递？

Is it possible to pass a Svelte store as a property on a component?

svelte

是否可以在组件上将 Svelte 商店作为属性传递？