如何在 Svelte 视图中最好地实现可共享的数据模型

Question

我创建了一个包含表单的视图，该表单的控件绑定到模型对象上的属性，该对象也由其他视图共享）。我想弄清楚是否真的需要或推荐使用 Store 范式。

例如，模型看起来有点像：

model = { 
   foo: undefined,
   bar: undefined,
   baz: undefined
}

... UI 将通过以下方式将各种输入绑定到模型：

//example.svelte
<script>
   import { exampleModel } from "./models.js";
</script>

<h2>Has foo?</h2>
<label for="input_foo_t">yes</label>
<input id="input_foo_t" type="radio" bind:group={exampleModel.foo} value={true}/>

<label for="input_foo_f">no</label>
<input id="input_foo_f" type="radio" bind:group={exampleModel.foo} value={false}/>

<h2>Has bar?</h2>
<label for="input_bar_t">yes</label>
<input id="input_bar_t" type="radio" bind:group={exampleModel.bar} value={true}/>

<label for="input_bar_f">no</label>
<input id="input_bar_f" type="radio" bind:group={exampleModel.bar} value={false}/>

理想情况下，我希望将论文作为一个整体保留。从我看到的所有例子中，那里没有这样的东西。Svelte 商店的意图是提供超细粒度的、可共享的数据，以便我们基本上“存储”单个值吗？或者是否有示例显示在商店范式中使用的模型对象之类的东西？我是否缺少一些需要通过使用 Svelte Store（类似于 Angular 的摘要）来利用的生命周期过程？

Answer 1

您当然可以为此使用商店：

// models.js
import { writable } from 'svelte/store';

export const exampleModel = writable({
  foo: undefined,
  bar: undefined,
  baz: undefined,
});

//example.svelte
<script>
   import { exampleModel } from "./models.js";
</script>

<h2>Has foo?</h2>
<label for="input_foo_t">yes</label>
<input id="input_foo_t" type="radio" bind:group={$exampleModel.foo} value={true}/>
<!-- etc -->

话虽如此，最好不要有巨大的模型，因为修改一个属性会导致它的所有依赖项都被检查（即如果你改变了$exampleModel.foo，对的引用$exampleModel.bar也将被更新，因为就 Svelte 而言$exampleModel是改变的东西） . 这通常不是一个真正的问题，但需要注意。避免这种情况的替代方案是具有更细粒度的值：

// models.js
export const foo = writable();
export const bar = writable();
export const baz = writable();