窗口未在 svelte 中定义 - 使用 svelte 存储

Question

我有一个 svelte 商店，有以下代码

import { writable } from "svelte/store";
import { onMount, onDestroy } from "svelte";

export const modalStore = () => {
    const { subscribe, update } = writable({
        showModal: false,
    });

    onMount(() => {
        window.addEventListener("keydown", handleKeyDown);
    });

    onDestroy(() => {
        window.removeEventListener("keydown", handleKeyDown);
    });

    const handleKeyDown = (e: KeyboardEvent) => {
        if (e.key === "Escape") {
            update(stateObj => ({...stateObj, showModal: false}));
        }
    }
    return  {
        subscribe,
        openModal: () => update(stateObj => ({ ...stateObj, modal: true })),
        closeModal: () => update(stateObj => ({ ...stateObj, modal: false })),
        handleKeyDown,

    }
}

编辑

我通过以下代码访问了商店

let modalState = modalStore();

然后通过$modalState检查状态并通过 modalStore.openModal() 访问该函数；

它抛出 500 错误 - 窗口未定义

我该如何解决？

Answer 1

问题是onDestroy在服务器上执行。因此，不应该使用onDestroy返回的函数，而onMount应该使用。

文件：

在onMount、beforeUpdate、afterUpdate和中onDestroy，这是唯一一个在服务器端组件内运行的组件。