Svelte Kit +page无法显示Store更新值，仅展示默认值问题

问题根源 #

表单提交触发页面重载，导致内存中的 Store 状态丢失：客户端更新 Store 后短暂显示新值，但页面刷新后，Store 重新初始化回到默认值，这就是闪现后回退的原因。禁用 SSR 后，客户端初始化时没有服务端预渲染的干扰，但因为没有持久化或正确初始化，始终显示默认值。

解决步骤 #

1. 阻止表单默认提交，避免页面重载 #

页面重载会清空内存中的 Store 状态，先修改表单提交逻辑：

<script>
  import { myStore } from '$lib/stores';

  async function handleSubmit(e) {
    e.preventDefault(); // 阻止默认刷新行为
    const formData = new FormData(e.target);
    
    // 处理表单提交（比如调用 API）
    await fetch('/api/submit', {
      method: 'POST',
      body: formData
    });
    
    // 更新 Store
    myStore.set('updated');
  }
</script>

<form on:submit={handleSubmit}>
  <!-- 表单内容 -->
  <button type="submit">提交</button>
</form>

2. 持久化 Store 到本地存储 #

即使阻止了表单刷新，用户手动刷新页面仍会丢失状态，给 Store 加上持久化逻辑：

// src/lib/stores.js
import { writable } from 'svelte/store';

function createPersistentStore(key, initialValue) {
  const storedValue = localStorage.getItem(key);
  const value = storedValue ? JSON.parse(storedValue) : initialValue;
  const store = writable(value);

  store.subscribe(newValue => {
    localStorage.setItem(key, JSON.stringify(newValue));
  });

  return store;
}

export const myStore = createPersistentStore('my-store', 'default');

3. 适配 SSR 场景（可选） #

如果需要保留 SSR，在页面的 +page.server.js 中通过 load 函数传递初始状态，让服务端渲染时使用正确的值：

// src/routes/+page.server.js
export async function load({ cookies }) {
  // 从 cookie 或数据库获取初始值（根据你的业务场景）
  const initialValue = cookies.get('my-store') || 'default';
  return { initialValue };
}

在页面中初始化 Store：

<script>
  import { myStore } from '$lib/stores';
  export let data;

  // 页面加载时用服务端传递的值初始化 Store
  myStore.set(data.initialValue);
</script>

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