SvelteKit路由间如何共享并获取可写Store？

首先确认你的Store文件导出正确，示例src/stores.js（更推荐放到src/lib/stores.js）代码如下：

import { writable } from 'svelte/store';

// 导出可写Store，初始值按需设置
export const users = writable([]);

跨路由正确导入与使用 #

在任意路由页面（比如src/routes/mylist/+page.svelte）中，按以下方式操作：

1. 正确导入Store #

推荐使用SvelteKit的$lib别名（指向src/lib文件夹），如果你的Store在src/lib/stores.js，导入代码为：

<script>
  import { users } from '$lib/stores.js';
</script>

如果Store在src根目录，相对路径需对应层级，比如mylist路由下的页面要写：

<script>
  import { users } from '../../stores.js';
</script>

（更建议把Store移到src/lib下，避免相对路径出错）

2. 使用Store #

• 自动订阅（推荐）：在模板或脚本中用$前缀直接访问Store值，Svelte会自动处理订阅和取消订阅：

<!-- 模板中直接使用 -->
<div>当前用户列表：{$users}</div>

<script>
  import { users } from '$lib/stores.js';
  
  // 脚本中获取当前值
  let userCount = $users.length;
  
  // 更新Store的方式和默认路由一致
  function addUser() {
    $users = [...$users, { id: Date.now(), name: '新用户' }];
    // 或者用Store的update方法
    // users.update(prev => [...prev, { id: Date.now(), name: '新用户' }]);
  }
</script>

• 手动订阅：如果需要更精细控制订阅逻辑，可手动订阅并在组件销毁时取消：

<script>
  import { users } from '$lib/stores.js';
  import { onDestroy } from 'svelte';
  
  let currentUsers;
  // 订阅Store
  const unsubscribe = users.subscribe(value => {
    currentUsers = value;
  });
  
  // 组件销毁时取消订阅，避免内存泄漏
  onDestroy(unsubscribe);
</script>

常见错误排查 #

• 路径错误：检查导入路径是否对应Store文件的实际位置，用$lib别名可避免层级混乱。
• 未正确导出：确保Store文件中用export导出writable实例，而非局部变量。
• 未使用$前缀：直接访问users得到的是Store对象，而非其值，必须用$users获取当前值。

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