Svelte 反应性 - 类成员更改不会反映在 UI 上

Question

我目前正在创建一个表格管理器 Web 组件，它由几个不同的组件组成，例如 data-table、search-bar 等。我单独管理它，因为在某些情况下不使用表格或搜索栏，但是当它们一起使用时，它们使用相同的类作为输入。搜索栏调用类的搜索方法之一，并相应地过滤数据，但是数据属性在类中发生了变化，只有当我执行一些操作来刷新时它才会反映在 UI 上（例如检查复选框）。

所以我通过组件A 中的类方法调用来更改类的一个成员，我希望它反映在组件B 中。

export let config: TableConfig = new TableConfig();
$: setConfig(config);

...

// Search function:
config.quickSearch(quickSearchValue);

我遍历config.data 以显示一些数据。搜索后，data 成员更改，如果我使用setInterval 将配置记录到table 组件中，它会显示更改后的data，但 UI 不会刷新。

也许我的方法是完全错误的，但这就是我在 Angular 中的做法，但它有很多不必要的依赖关系，所以现在我正试图摆脱它。所以我的主要目标是使用它任何地方，例如 Svelte、Angular、VanillaJS 等。

编辑：

REPL 示例：https://svelte.dev/repl/311538f2cf52484f8d0ac3aeae7540ea?version=3.31.0

Answer 1

UI 没有变化，因为据 Svelte 所知，数据没有变化。如果你想保持这种结构，你必须为你的班级添加一个订阅系统。

然而，Svelte 有一个更好的跨组件共享数据的方法，那就是stores。在您的情况下，您可以做的是创建一个自定义存储 enter link description here，它封装了您曾经在一个类中拥有的逻辑。这样一来，您就可以简单地在一个组件中订阅此存储，并在另一个组件中触发更新，从而受益于 Svelte 的响应性。