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}/>

理想情况下，我想把这些论文作为一个整体保存。从我看到的所有例子中，没有这样的例子。苗条商店的目的是提供超细粒度、可共享的数据，以便我们基本上只存储一个值吗？或者，是否有一些示例显示在store范例中使用的模型对象之类的东西？我是否错过了一些我需要利用的生命周期过程，使用类似于Angular's digest的苗条商店？

你当然可以使用商店来实现这一点：

//models.js 从'svelte/store'导入{writable}； export const exampleModel=可写{ 傅：未定义， 酒吧：未定义， baz：未定义， }; //苗条 从./models.js导入{exampleModel}； 有福吗？ 对 话虽如此，最好不要使用大型模型，因为修改一个属性会导致检查它的所有依赖项，即如果更改$exampleModel.foo，对$exampleModel.bar的引用也会更新，因为就Svelte而言，$exampleModel是更改的对象。这通常不是一个真正的问题，但这是一个需要注意的问题。另一种避免这种情况的方法是使用更细粒度的值：

//models.js 导出常量foo=可写； 导出常量条=可写； export const baz=可写； 您当然可以使用商店进行此操作：

//models.js 从'svelte/store'导入{writable}； export const exampleModel=可写{ 傅：未定义， 酒吧：未定义， baz：未定义， }; //苗条 从./models.js导入{exampleModel}； 有福吗？ 对 话虽如此，最好不要使用大型模型，因为修改一个属性会导致检查它的所有依赖项，即如果更改$exampleModel.foo，对$exampleModel.bar的引用也会更新，因为就Svelte而言，$exampleModel是更改的对象。这通常不是一个真正的问题，但这是一个需要注意的问题。另一种避免这种情况的方法是使用更细粒度的值：

//models.js 导出常量foo=可写； 导出常量条=可写； export const baz=可写；

---

我已经创建了两个例子来说明Rich在谈论什么

第一个模型使用一个深度包含所有三个变量的单一模型

单击复选框以更改单个变量。右侧的计数状态变化表明，所有三个变量都被错误地视为发生了反射性变化：-

const fooChangeCount=createReflectiveCounter； 常量barChangeCount=createReflectiveCounter； const bazChangeCount=createReflectiveCounter； //监视基于存储的状态更改 $：fooChangeCount.monitor$model.foo； $：barChangeCount.monitor$model.bar； $：bazChangeCount.monitor$model.baz； 常数重置==>{ foochangecont.reset； barchangecont.reset； bazChangeCount.reset； }; 精简存储粒度 Ver 1单一型号 foo:状态更改了{$foochangecont}次 bar:状态更改{$barChangeCount}次 baz:状态更改了{$bazChangeCount}次 单击以更改每个变量：状态更改计数到右侧

重置计数 从'svelte/store'导入{writable}； 常量模型=可写{ 傅：未定义， 酒吧：未定义， baz：未定义， }; 函数createReflectiveCounter{ //我们的基本可写存储 //…-1解释了我们最初的监视器反射将其撞到0的原因 const{subscribe，set，update}=writeable-1； //公开我们新创建的自定义存储 返回{ 订阅 监视器{ updatecount=>count+1；//增加我们的计数 return；//参见JavaDoc }, 重置：=>set0 }; } 第二种方法使用多个模型，这里演示的三个变量各一个：

在这种情况下，计数状态更改为“立即”正确地表明，只有实际更改的变量才被视为自反变量：-

const fooChangeCount=createReflectiveCounter； 常量barChangeCount=createReflectiveCounter； const bazChangeCount=createReflectiveCounter； //监视基于存储的状态更改 $：fooChangeCount.monitor$foo； $：barChangeCount.monitor$bar； $：bazChangeCount.monitor$baz； 常数重置==>{ foochangecont.reset； barchangecont.reset； bazChangeCount.reset； }; 精简存储粒度 版本2多模型 foo:状态更改了{$foochangecont}次 bar:状态更改{$barChangeCount}次 baz:状态已更改{$ba zChangeCount}次 单击以更改每个变量：状态更改计数到右侧

重置计数 从'svelte/store'导入{writable}； const foo=可写； 常数条=可写； const baz=可写； 函数createReflectiveCounter{ //我们的基本可写存储 //…-1解释了我们最初的监视器反射将其撞到0的原因 const{subscribe，set，update}=writeable-1； //公开我们新创建的自定义存储 返回{ 订阅 监视器{ updatecount=>count+1；//增加我们的计数 return；//参见JavaDoc }, 重置：=>set0 }; } 希望这有帮助

---

我已经创建了两个例子来说明Rich在谈论什么

第一个模型使用一个深度包含所有三个变量的单一模型

单击复选框以更改单个变量。右侧的计数状态变化表明，所有三个变量都被错误地视为发生了反射性变化：-

const fooChangeCount=createReflectiveCounter； 常量barChangeCount=createReflectiveCounter； const bazChangeCount=createReflectiveCounter； //监视基于存储的状态更改 $：fooChangeCount.monitor$model.foo； $：barChangeCount.monitor$model.bar； $：bazChangeCount.monitor$model.baz； 常数重置==>{ foochangecont.reset； barchangecont.reset； bazChangeCount.reset； }; 精简存储粒度 Ver 1单一型号 foo:状态更改了{$foochangecont}次 bar:状态更改{$barChangeCount}次 baz:状态更改了{$bazChangeCount}次 单击以更改每个变量：状态更改计数到右侧

重置计数 从'svelte/store'导入{writable}； 常量模型=可写{ 傅：未定义， 酒吧：未定义， baz：未定义， }; 函数createReflectiveCounter{ //我们的基本可写存储 //…-1解释了我们最初的监视器反射将其撞到0的原因 const{subscribe，set，update}=writeable-1； //公开我们新创建的自定义存储 返回{ 订阅 监视器{ updatecount=>count+1；//增加我们的计数 return；//参见JavaDoc }, 重置：=>set0 }; } 第二种方法使用多个模型，这里演示的三个变量各一个：

在这种情况下，计数状态更改为“立即”正确地表明，只有实际更改的变量才被视为自反变量：-

const fooChangeCount=createReflectiveCounter； 常量barChangeCount=createReflectiveCounter； const bazChangeCount=createReflectiveCounter； //监视基于存储的状态更改 $：fooChangeCount.monitor$foo； $：barChangeCount.monitor$bar； $：bazChangeCount.monitor$baz； 常数重置==>{ foochangecont.reset； barchangecont.reset； bazChangeCount.reset； }; 精简存储粒度 版本2多模型 foo:状态更改了{$foochangecont}次 bar:状态更改{$barChangeCount}次 baz:状态更改了{$bazChangeCount}次 单击以更改每个变量：状态更改计数到右侧

重置计数 从'svelte/store'导入{writable}； const foo=可写； 常数条=可写； const baz=可写； 函数createReflectiveCounter{ //我们的基本可写存储 //…-1解释了我们最初的监视器反射将其撞到0的原因 const{subscribe，set，update}=writeable-1； //公开我们新创建的自定义存储 返回{ 订阅 监视器{ updatecount=>count+1；//增加我们的计数 return；//参见JavaDoc }, 重置：=>set0 }; } 希望这有帮助

---

那么，在我的模特身上使用苗条商店有什么真正的优势吗？我的意思是，我可以通过模型对象的简单导出轻松实现同样的事情，并且它仍然反映了使用它的其他视图中的更改。如果它以某种方式反映了这些更改，那么它这样做是偶然的。在Svelte中，管理组件层次结构之外的数据的方法是使用store。对于我的模型，使用Svelte store有什么真正的优势吗？我的意思是，我可以通过模型对象的简单导出轻松实现同样的事情，并且它仍然反映了使用它的其他视图中的更改。如果它以某种方式反映了这些更改，那么它这样做是偶然的。在Svelte中，管理组件层次结构之外的数据的方法是使用存储