SvelteKit：点击+page按钮修改+layout属性的实现问题

原本想通过+page.svelte里的按钮点击，修改+layout.svelte中的theme属性，但尝试用+layout.ts的load函数返回状态和切换方法后，点击按钮控制台能看到状态变化，可布局里的内容完全没更新。

用户的尝试代码如下：

<!-- +layout.svelte -->
<script lang=ts>
    let theme="light"
</script>
<div data-theme={theme}>
    <slot/>
</div>

// +layout.ts
export function load() {
    const options = ['light', 'dark'];
    let current = 'light';
    const toggle = () => {
        console.log(current);
        current = current === 'light' ? 'dark' : 'light';
    };
    return {
        toggle,
        current
    };
}

<!-- +page.svelte -->
<script lang=ts>
    import { page } from '$app/stores';
    import type {PageData} from './$types';
    export let data: PageData;
</script>
<h1>Welcome to SvelteKit</h1>
<p>Visit kit.svelte.dev to read the documentation</p>
<div class="container">
    <button on:click={data.toggle}>Button</button>
</div>

• load函数返回的是普通JavaScript变量，不是Svelte的响应式值，变量变化不会触发组件重新渲染
• +layout.svelte和+page.svelte拿到的是load返回值的独立副本，页面里修改的是自己的副本，布局里的副本完全不会同步变化

要让布局和页面共享并同步状态，最直接的方式是使用Svelte的writable store，它能让所有订阅该存储的组件自动响应状态变化。

步骤1：创建主题状态存储文件 #

在src/lib/stores/目录下新建theme.ts：

import { writable } from 'svelte/store';

// 创建响应式存储，初始值为light
const themeStore = writable('light');

// 定义切换主题的方法
export const toggleTheme = () => {
    themeStore.update(current => current === 'light' ? 'dark' : 'light');
};

export default themeStore;

步骤2：修改布局文件+layout.svelte #

<script lang="ts">
    import '../app.postcss';
    import themeStore from '$lib/stores/theme';
</script>

<!-- 用$前缀直接订阅store，状态变化时自动更新 -->
<div data-theme={$themeStore}>
    当前主题：{$themeStore}
    <slot />
</div>

步骤3：修改页面文件+page.svelte #

<script lang="ts">
    import { toggleTheme } from '$lib/stores/theme';
</script>

<h1>Welcome to SvelteKit</h1>
<p>Visit kit.svelte.dev to read the documentation</p>
<div class="container">
    <button on:click={toggleTheme}>切换主题</button>
</div>

原理说明 #

• writable存储创建了一个全局的响应式状态容器，所有订阅它的组件都会在状态变化时自动更新
• 使用$前缀是Svelte的语法糖，会自动帮我们完成订阅/取消订阅的操作，无需手动处理
• toggleTheme方法通过store的update方法修改状态，确保所有订阅该store的组件都能感知到变化

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