Question

我创建了一个包含表单的视图，该表单的控件绑定到Model对象的属性，该对象也由其他视图共享）。我正在尝试确定是否真的有必要或建议使用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商店的目的是提供超细粒度，可共享的数据，从而使我们基本上“存储”单个值吗？还是有示例显示商店范式中正在使用的Model对象之类的示例？我是否错过了一些需要利用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 -->

话虽如此，最好不要有 huge 模型，因为修改一个属性会导致对其所有依赖项进行检查（即，如果您更改$exampleModel.foo，则引用{{ 1}}也将被更新，因为就Svelte而言，$exampleModel.bar是已更改的事物）。通常这不是一个真正的问题，但需要注意。避免这种情况的替代方法是具有更细的值：

$exampleModel

Answer 2

我创建了两个示例，演示了Rich在谈论什么。

第一个使用包含所有三个变量（此处为Svelte Store Granularity (Ver 1 Single Model)）的单个模型（具有深度）。

单击复选框更改单个变量。记录的状态变化（在右侧）显示所有三个变量不正确被认为已发生了反射性变化：-（

<script>
  const fooChangeCount = createReflectiveCounter();
  const barChangeCount = createReflectiveCounter();
  const bazChangeCount = createReflectiveCounter();

  // monitor store-based state changes
  $: fooChangeCount.monitor($model.foo);
  $: barChangeCount.monitor($model.bar);
  $: bazChangeCount.monitor($model.baz);

  const reset = () => {
    fooChangeCount.reset();
    barChangeCount.reset();
    bazChangeCount.reset();
  };
</script>

<h2>Svelte Store Granularity</h2>
<h4><i>(Ver 1 Single Model)</i></h4>

<label><input type=checkbox bind:checked={$model.foo}> foo: (state changed {$fooChangeCount} times)</label>
<label><input type=checkbox bind:checked={$model.bar}> bar: (state changed {$barChangeCount} times)</label>
<label><input type=checkbox bind:checked={$model.baz}> baz: (state changed {$bazChangeCount} times)</label>

<p><i>click to change each var: <b>state changes tallied to right</b></i></p>
<button on:click={reset}>Reset Counts</button>

<script context="module">
  import {writable} from 'svelte/store';

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

  function createReflectiveCounter() {
    // our base writable store
    // ... -1 accounts for our initial monitor reflection (bumping it to 0)
    const {subscribe, set, update} = writable(-1);

    // expose our newly created custom store
    return {
      subscribe,
      monitor() {
        update((count) => count + 1); // increment our count
        return '';                    // see JavaDoc
      },
      reset: () => set(0)
    };
  }
</script>

第二个使用多个模型，每个模型三个变量（此处为Svelte Store Granularity (Ver 2 Multiple Models)）。

在这种情况下，计数状态更改了（在右侧）现在正确，表明只有实际更改的变量才被认为是自反的：-）

<script>
  const fooChangeCount = createReflectiveCounter();
  const barChangeCount = createReflectiveCounter();
  const bazChangeCount = createReflectiveCounter();

  // monitor store-based state changes
  $: fooChangeCount.monitor($foo);
  $: barChangeCount.monitor($bar);
  $: bazChangeCount.monitor($baz);

  const reset = () => {
    fooChangeCount.reset();
    barChangeCount.reset();
    bazChangeCount.reset();
  };
</script>


<h2>Svelte Store Granularity</h2>
<h4><i>(Ver 2 Multiple Models)</i></h4>

<label><input type=checkbox bind:checked={$foo}> foo: (state changed {$fooChangeCount} times)</label>
<label><input type=checkbox bind:checked={$bar}> bar: (state changed {$barChangeCount} times)</label>
<label><input type=checkbox bind:checked={$baz}> baz: (state changed {$bazChangeCount} times)</label>

<!-- Diagnostic: monitor store-based state changes -->
<p><i>click to change each var: <b>state changes tallied to right</b></i></p>
<button on:click={reset}>Reset Counts</button>


<script context="module">
  import {writable} from 'svelte/store';

  const foo = writable();
  const bar = writable();
  const baz = writable();

  function createReflectiveCounter() {
    // our base writable store
    // ... -1 accounts for our initial monitor reflection (bumping it to 0)
    const {subscribe, set, update} = writable(-1);

    // expose our newly created custom store
    return {
      subscribe,
      monitor() {
        update((count) => count + 1); // increment our count
        return '';                    // see JavaDoc
      },
      reset: () => set(0)
    };
  }
</script>

希望这会有所帮助！

</Kevin>

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

2 个答案: