不应在订阅时调用 Svelte 商店订阅功能

Question

我不明白这个。我正在尝试订阅一家 svelte 商店。但是传递给 subscribe 的闭包函数会立即被调用。即使商店的价值没有改变。

使用以下代码：

<script>
    import { onDestroy } from 'svelte';
    import { writable } from 'svelte/store';
    
    const store = writable({ givenName: '', familyName: '' });
    
    const unsubscribe = store.subscribe( state => {
    console.log('This function shouldn\'t have been invoked on subscription.');
    });
    onDestroy(unsubscribe);
</script>

<h1>
    Please check the console output ...
</h1>

恕我直言，闭包函数应该在更改时触发，而不是在订阅时触发，还是我遗漏了什么？

Answer 1

A writable 存储将立即调用传递给 subscribe 的函数及其当前值。这是“按设计工作”。如果您只关心更新，则需要自己编写一个小包装器来忽略第一个值。

例如函数

    function subscribeIgnoreFirst(store, fn) {
        let firedFirst = false;
        return store.subscribe(state => {
            if (!firedFirst) {
                firedFirst = true;
            } else {
                fn(state);
            }
        })
    }

Answer 2

其他一些观察结果。

javasript 函数总是return一个值。即使您没有 return 值，函数 return 也是未定义的。
A 商店总是 returns“当前值”。因此，当您订阅时，商店总是 returns 一个值。或者，如果您是第一个订阅者，您是否愿意等待下一次更改。或者，如果您错过了第一个，请永远等待。也许下一次改变永远不会到来。
当然跳过初始值是很容易的。或者一个特殊的初始值。

不应在订阅时调用 Svelte 商店订阅功能

Svelte store subscribed function should not be invoked on subscription

svelte

svelte-store