Svelte 商店有条件的自动订阅

Question

复制步骤:

• 在此处转到 REPL:https://svelte.dev/repl/27a2cff81ebb4000970eee32747cc6c2?version=3.20.1

• 打开控制台

• 取消注释第 27 行($: canSubscribe && $store)

预期:

我认为 $store 可以订阅(使用 $:) 只有 如果 canSubscribe 为真.

问题是:如果 canSubscribe 为假，为什么要订阅 $store？

我错了吗？

Answer 1

Am I wrong?

是的。不要责怪自己，你的期望对我来说似乎是合乎逻辑的。但这不是它的工作方式。

作为一般规则，如果组件代码中某处有一个 $ 前缀变量，那么它一定是一个商店，并且它会立即被订阅组件创建，并在组件销毁时取消订阅。

虽然最近引入了此规则的一个小异常(exception)(this PR)。如果你想知道整个讨论，我会让你沿着兔子洞的踪迹走下去。它的症结在于，现在，商店订阅必须是商店或 nullish(即，null 或undefined -- 参见 this comment )。

这意味着如果需要，现在可以通过黑客攻击达到您预期的行为。我们将回到这一点。

Why $store subscribe if canSubscribe is false?

因为商店是立即订阅的。从上面链接的问题中的讨论来看，我的理解是它是为了性能(字节大小)和健全性(如果有人试图订阅不是商店的东西，就会快速失败并且明显地失败)。对我来说很有意义。

现在，回到您没有问过的问题:如何仅在/如果需要时订阅？仅在需要时将商店放入自动订阅变量中，否则保持空值。

不要做:

$: started && $store

改为这样做:

$: proxyStore = started ? store : null
$: console.log($proxyStore)

完整示例(REPL):

<script>
    import { writable } from 'svelte/store'

    const state1 = { subscribed: 0, unsubscribed: 0 }

    const store1 = writable(42, () => {
        state1.subscribed++
        return () => {
            state1.unsubscribed++
        }
    })

    const state2 = { subscribed: 0, unsubscribed: 0 }

    const store2 = writable(43, () => {
        state2.subscribed++
        return () => {
            state2.unsubscribed++
        }
    })

    let started = false

    $: started && $store1

    $: targetStore = started ? store2 : null

    $: $targetStore
</script>

<pre>
started = {started}
store1 = {$store1} {JSON.stringify(state1)}
store2 = {$targetStore} {JSON.stringify(state2)}
</pre>

<button on:click={() => {started = !started}}>
    {started ? 'Start' : 'Stop'}
</button>