在Astro框架中如何跨路由保留用户数据状态？（搭配Svelte）

问题根源 #

你用Svelte Stores/Nano Stores没生效，核心原因是Astro的服务端渲染(SSR)或静态站点生成(SSG)特性：组件在服务端初始化的Store状态不会同步到客户端，或者路由切换时组件重新挂载导致Store状态被重置。

有效解决方案 #

1. 给Store加上客户端持久化逻辑 #

不管用Svelte Stores还是Nano Stores，都要保证Store只在客户端初始化，并结合localStorage/sessionStorage做持久化，避免路由切换时状态丢失。

Svelte Stores 示例

创建带持久化的用户Store：

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

// 仅在客户端读取本地存储的初始值
const storedUser = typeof window !== 'undefined' ? localStorage.getItem('user') : null;
const initialValue = storedUser ? JSON.parse(storedUser) : null;

export const userStore = writable(initialValue);

// 订阅Store变化，同步到本地存储
userStore.subscribe(value => {
  if (typeof window !== 'undefined') {
    localStorage.setItem('user', JSON.stringify(value));
  }
});

在Svelte组件中使用时，必须标记为客户端组件（加client:load或client:only指令）：

<!-- src/components/User.svelte -->
<script>
  import { userStore } from '../stores/user.js';
</script>

<div>当前用户: {$userStore?.name}</div>

Astro页面中引入组件：

---
---
<User client:load />

Nano Stores 示例

Nano Stores同样需要绑定客户端存储：

// src/stores/user.js
import { atom } from 'nanostores';

let initialValue = null;
if (typeof window !== 'undefined') {
  initialValue = JSON.parse(localStorage.getItem('user') || 'null');
}

export const userStore = atom(initialValue);

userStore.subscribe(value => {
  if (typeof window !== 'undefined') {
    localStorage.setItem('user', JSON.stringify(value));
  }
});

使用方式和Svelte Stores一致，组件必须添加客户端指令。

2. SSR场景用Astro locals传递状态 #

如果你的项目是SSR模式，可以通过Astro的locals对象在服务端获取用户状态，再同步到客户端Store：

在src/middleware.js中获取并设置服务端状态：

export async function middleware({ locals, request }) {
  // 从请求cookie或其他渠道获取用户数据
  const user = await getUserFromCookie(request.headers.get('cookie'));
  locals.user = user;
}

Astro页面中把状态传递给Svelte组件：

---
export async function getServerSideProps({ locals }) {
  return {
    props: {
      initialUser: locals.user
    }
  };
}
---
<User client:load initialUser={initialUser} />

Svelte组件中同步初始值到Store：

<script>
  import { userStore } from '../stores/user.js';
  export let initialUser;

  if (initialUser) {
    $userStore = initialUser;
  }
</script>

3. 避开常见坑点 #

• 永远要加typeof window !== 'undefined'判断，确保Store的初始化和持久化逻辑只在客户端运行。
• 路由切换时，未加客户端指令的Svelte组件会重新挂载，导致Store实例重置，必须给组件加上client:系列指令。
• 纯SSG模式下，所有状态逻辑都要放在客户端，服务端无法传递动态状态。

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