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

如何解决关于将 Svelte 存储与树状嵌套对象一起使用的问题

如何将 svelte 存储与树状嵌套对象一起使用？来自this answer：

注意：绑定只有在同一个变量时才有效。也就是说，您不能将绑定变量放在中间变量中，并让 svelte 一直跟踪此绑定。

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

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

关于性能的一些问题：

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

解决方法

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));

直接修改 store 值（如 storeValue.property = 1）不会触发更新，您必须明确更新 Svelte 的 store 以使变量无效。我还建议将这些操作与 store 中的方法包装在一起，这将帮助您跟踪代码变大时从何处更新的内容。

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 会帮助你）。如果这些分支彼此无关，那么我建议将它们分开（也是为了避免大的 blob；我不喜欢 Redux 风格的将所有内容都放在一个对象中）。内存占用不是这里的一个因素。