typescript 为什么在值没有改变的情况下,我的Svelte store subscribe()会被触发?

enyaitl3  于 2022-12-19  发布在  TypeScript
关注(0)|答案(1)|浏览(121)

我有一个苗条的商店activeAccountIndexStore

export const activeAccountIndexStore: Writable<number | "native" | null> =
  writable(null);

原始值为null,但经过一些网络活动后,它将被设置为特定的numberstring“native”。
我还有一个用于存储的subscribe()处理程序,它是从其他Svelte组件调用的:

export const onChangeActiveAccount = (
  activeAccountHandler: ActiveAccountHandler
) => {
  activeAccountIndexStore.subscribe((newValue) => {
    log(`➡️➡️➡️➡️➡️ activeAccountIndexStore new value`, newValue);
    if (newValue !== null) {
      const activeAccount = getActiveAccount();
      activeAccountHandler(activeAccount);
    }
  });
};

奇怪的是,subscribe()更改处理程序被重复调用,即使存储在后续更改中具有相同的值:

stores.ts:68 ➡️➡️➡️➡️➡️ activeAccountIndexStore new value null
stores.ts:68 ➡️➡️➡️➡️➡️ activeAccountIndexStore new value null
2stores.ts:68 ➡️➡️➡️➡️➡️ activeAccountIndexStore new value 0
stores.ts:68 ➡️➡️➡️➡️➡️ activeAccountIndexStore new value 0
stores.ts:68 ➡️➡️➡️➡️➡️ activeAccountIndexStore new value 0
stores.ts:68 ➡️➡️➡️➡️➡️ activeAccountIndexStore new value 0
stores.ts:68 ➡️➡️➡️➡️➡️ activeAccountIndexStore new value 0

MDNs Svelte docs状态:
商店是一个带有subscribe()方法的对象,该方法允许在商店值发生更改时通知相关方。
但在上面的许多情况下,价值并没有改变。我本来会期望看到:

stores.ts:68 ➡️➡️➡️➡️➡️ activeAccountIndexStore new value null
stores.ts:68 ➡️➡️➡️➡️➡️ activeAccountIndexStore new value 0

为什么在值未更改的情况下触发我的Svelte store subscribe()?

o3imoua4

o3imoua41#

这与重新评估你的Svelte组件有关,如果你订阅一个组件内的存储,并且该组件的示例正在被创建和销毁,订阅事件将被触发,因为该值对于该组件的示例是新的
如果组件被卸载并重新装载,或者如果组件接收到新的状态,则可能会重新评估组件。
一个简单的解决方案是记忆组件状态,例如在组件外部执行.subscribe()

相关问题