如何在标准SvelteKit开发环境热重载时保留状态？

要全局开启svelte-hmr的状态保留，无需修改vite.config.js，直接在svelte.config.js中添加vitePlugin配置项，传递svelte-hmr的全局参数即可：

修改后的svelte.config.js #

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter()
    },
    preprocess: [vitePreprocess()],
    // 配置vite-plugin-svelte，传递svelte-hmr全局选项
    vitePlugin: {
        hmr: {
            // 全局保留组件本地状态（推荐）
            preserveLocalState: true,
            // 若需要保留所有状态（包括props变更等），可启用下面选项
            // preserveAllState: true
        }
    }
};

export default config;

配置说明 #

• preserveLocalState: true：默认保留组件内声明的本地状态（比如let count = 0这类变量），符合React开发环境的常见预期
• preserveAllState: true：会保留更多状态（如props的临时变化、组件实例的全部内部状态），但可能在组件结构变更时引发意外，按需选择
• 配置生效后，所有组件无需添加// @hmr:keep-all注释即可自动保留状态

例外处理 #

如果需要给特定组件禁用状态保留，可在组件顶部添加注释：

// @hmr:reset
<script>
    // 组件代码
</script>

注意事项 #

状态保留存在局限性：当组件的核心结构发生变更（比如新增/删除props、重命名组件、修改组件继承关系）时，HMR仍会重置组件状态，这是正常的设计逻辑。

内容的提问来源于stack exchange，提问作者Antrikshy