1

如何将 Svelte 存储与树状嵌套对象一起使用？从这个答案：

注意：绑定仅在它是相同变量时才有效。也就是说，您不能将绑定变量放在中间变量中，并让 Svelte 继续跟踪此绑定。

这一点，以及我自己的测试，似乎暗示着无法从 Svelte 组件外部的脚本被动地更新嵌套存储（更新存储并更新状态）。据我所知，唯一的方法是store.update()在对商店进行更改后手动调用脚本。它是否正确？

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

关于性能的一些问题：

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

1 回答 1

3

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语法： That is desugared to a 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?

关于性能：最好使更新更细化，或者通过将分支包装在他们自己的商店中，或者通过拥有一个大商店但选择商店的切片，如果他们不会触发更新部分没有改变（派生商店会帮助你）。如果这些分支彼此不相关，那么我建议将它们拆分（也是为了避免出现大块；我不喜欢 Redux 风格的保持一切在一个对象中）。内存占用不是这里的一个因素。

于 2021-06-02T07:22:24.623 回答