SvelteKit跨页面共享已配置服务对象（如HTTP客户端）方案咨询

你可以根据自己的使用场景二选一，两种方案都支持HTTP客户端、GraphQL客户端等任意非POJO服务实例的全局共享，无需每个页面重复初始化：

方案1：根布局注入上下文（适配动态配置场景） #

SvelteKit的上下文是沿组件树向下共享的，所有页面和子组件都是根布局+layout.svelte的后代，你可以完全复用原SPA的setContext/getContext逻辑，只需把初始化操作移到根布局即可：

1. 先抽离服务实例的创建逻辑，单独存放在公共库目录：

// src/lib/services/http.ts
// 你的原HTTP客户端创建逻辑，接收debug等配置参数
export function createHttpClient(debug: boolean) {
  return {
    // 自定义请求方法、日志逻辑等
  }
}
// 定义上下文唯一key
export const HTTP_CLIENT = Symbol('http-client')

2. 在根布局的load函数中返回可序列化的配置参数（比如debug开关），支持从环境变量、用户配置、启动参数等任意来源获取：

// src/routes/+layout.ts
export function load() {
  return {
    // 示例：从环境变量取debug开关，也可以从用户session等位置读取动态配置
    debug: import.meta.env.VITE_ENABLE_HTTP_LOG === 'true'
  }
}

3. 在根布局组件中初始化服务实例并注入上下文：

<!-- src/routes/+layout.svelte -->
<script>
  import { setContext } from 'svelte'
  import { createHttpClient, HTTP_CLIENT } from '$lib/services/http'
  // 接收load函数返回的配置
  export let data
  // 初始化HTTP客户端，GraphQL客户端等同理创建注入即可
  const httpClient = createHttpClient(data.debug)
  setContext(HTTP_CLIENT, httpClient)
</script>
<slot />

4. 任意页面、子组件中直接取用即可，和你原SPA的用法完全一致：

<script>
  import { getContext } from 'svelte'
  import { HTTP_CLIENT } from '$lib/services/http'
  const httpClient = getContext(HTTP_CLIENT)
</script>

该方案全局仅初始化一次服务实例，所有组件共享同一个对象，支持动态配置。

方案2：单例导出（适配全局固定配置场景） #

如果你的服务配置是全局固定的，不会随不同请求、不同用户变化，可以直接用单例模式导出实例，用法更简单：

// src/lib/services/http.ts
const debug = import.meta.env.VITE_ENABLE_HTTP_LOG === 'true'
const httpClient = createHttpClient(debug)
export default httpClient

需要使用的地方直接导入即可：

import httpClient from '$lib/services/http'

注意事项 #

你之前尝试存入session报错是因为SvelteKit的session需要序列化为JSON传递给前端，天生不支持存储带方法、函数的非POJO对象，本身设计定位就不是用来存放这类实例的，不要用它来存服务实例。

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