如何向SvelteKit endpoint传递props？store取值undefined问题求助

AI 小北

2026-10-2

核心问题原因

你遇到的问题本质是客户端运行环境和服务端运行环境隔离：

你在index.svelte里修改的store是运行在用户浏览器的客户端状态，仅在当前用户的浏览器上下文生效
/apis/ping对应的ping.ts是SvelteKit的服务端端点，代码运行在服务器上，和用户浏览器的客户端store完全不互通，所以你在服务端拿客户端修改的store值，必然返回undefined

你操作store的语法本身没有问题，只是store本身就是设计用来做客户端跨组件状态共享的，不具备跨客户端、服务端传值的能力。

可行的解决方案

直接把需要传递的value放在请求参数/请求体中传给服务端端点即可，实现成本最低也符合前后端交互的规范：

方案1：通过GET请求的query参数传递（适合非敏感短参数）

修改index.svelte中的请求逻辑，把值拼接到请求URL中：

<script lang="ts">
  import { sampleData } from "~/data/sample";

  async function handleClick() {
    const sendValue = "Fancy";
    $sampleData = {value: sendValue};
    // 对参数做URI编码避免特殊字符出错
    const result = await (await fetch(`/apis/ping?value=${encodeURIComponent(sendValue)}`)).json();
    console.log("result", result);
  }
</script>

<button on:click={handleClick}>Ping</button>

修改ping.ts的逻辑，从请求对象中获取参数：

import type { RequestEvent } from '@sveltejs/kit';

export async function get(event: RequestEvent): Promise<{ body: any }> {
  // 从请求的query参数中读取value
  const value = event.url.searchParams.get('value');
  console.log("value", value);  

  const result = await (
    await fetch(`https://my-server/app/ping?value=${encodeURIComponent(value)}`)
  ).json();

  return {
    body: result,
  };
}