关于将 Svelte 商店与树状嵌套对象一起使用的问题

Question

如何使用 Svelte 存储树状嵌套对象？来自 :

Note: bindings only works when it's the same variable. That is, you can't put the bound variable in an intermediate variable, and have Svelte keep tracking this binding.

这和我自己的测试似乎暗示不能从 Svelte 组件外部的脚本反应性地更新嵌套存储（更新存储并让它更新状态）。 据我所知，唯一的方法是在对商店进行更改后在脚本中手动调用 store.update()。这是正确的吗？

我正在寻求重构我的代码：我的主要组件的代码变得过于笨拙，我想引入更多的组件，并可能将状态更新功能保留在组件之外的 .js 文件中以实现可重用性。

关于性能的一些问题：

手动更新的性能是否会低于 Svelte 自动更新的性能？
我的应用程序需要处理一个相当大的嵌套商店，有数百个分店。在上面链接的答案中，建议创建一个嵌套商店，分支机构包裹在自己的商店中。与仅使用单个商店相比，拥有数百个（嵌套的）商店是否会显着增加应用程序的内存占用？

Answer 1

As far as I can see, the only way to do it is to manually call store.update() in the script after making changes to the store. Is this correct?

这几乎是正确的。 update 接收一个传递当前值并期望下一个值的函数。如果您在外部管理您的状态，然后将其传递到商店，请调用 set.

const myNewValue = doStuff(oldValue);
store.set(myNewValue);

对

store.update(oldValue => doStuff(oldValue));

直接修改存储值（如 storeValue.property = 1）不会触发更新，您必须明确更新 Svelte 的存储才能使变量无效。我还建议用存储上的方法包装这些操作，这将帮助您跟踪代码变大时从哪里更新的内容。

store.js:

const _store = writable(initialValue);

function doASpecificModification(foo) {
  _store.update(oldValue => { ... });
}

export const store = {
  subscribe: _store.subscribe,
  doASpecificModification
};

Would doing manual updates be less performant than what Svelte does automatically?

如果您所说的“自动”是指 $store = newValue 语法：即脱糖为 store.set(newValue)，因此没有区别。此外，Svelte 只会重新渲染您订阅商店的部分，因此性能应该不是问题（另请参阅下一节）。

My app needs to handle a pretty big nested store, with hundreds of branches. In the answer linked above, it is proposed to create a nested store, with branches wrapped in their own stores. Would having hundreds of (nested) stores significantly increase the memory footprint of the app compared to just using a single store?

关于性能：通过将分支包装在他们自己的商店中，或者通过拥有一个大商店但以他们不选择的方式选择商店的切片，使更新更细化可能更好如果他们的部分没有改变，则触发更新（derived stores 会帮助你）。如果这些分支彼此无关，那么我建议将它们分开（也是为了避免大块；我不喜欢那种 Redux 风格的将所有东西都放在一个对象中）。内存占用不是这里的一个因素。

关于将 Svelte 商店与树状嵌套对象一起使用的问题

Questions about using Svelte stores with tree-like nested object

svelte

svelte-store