如何将SvelteKit路由数据传递给shadow endpoint .ts端点

你现在的写法搞反了SvelteKit同路由Shadow Endpoint的执行顺序：

• 当你访问/test/sample路径时，服务端会优先执行sample.ts里的get方法，把返回的内容组装成props之后，才会传递给sample.svelte组件完成渲染
• 你在.svelte文件里定义的postId = 64是组件初始化阶段才会生成的变量，这时候对应的Shadow Endpoint早就执行完毕返回结果了，根本不可能反向把值传给提前运行的服务端逻辑。

根据你的postId实际使用场景选对应方案即可：

场景1：postId是固定静态值 #

这种情况完全没必要把值定义在组件里，直接在Shadow Endpoint中声明即可，还可以把值一起返回给组件使用：
修改src/routes/test/sample.ts代码：

const postId = 64; // 直接在endpoint里定义固定值
export async function get() {
    return {
        body: {
            message: 'Selected post id is : ' + postId,
            postId: postId
        }
    };
}

对应修改src/routes/test/sample.svelte代码：

<script>
    export let message;
    export let postId; // 直接接收endpoint返回的postId即可
</script>

<h1>{message}</h1>

场景2：postId是客户端动态生成的值 #

如果postId是用户交互选择、客户端运行时计算出来的动态值，首次页面加载时endpoint拿不到这个值，可以选以下两种方式实现：

• 方式一：通过URL查询参数传递
  跳转路由时把postId拼在URL查询参数里，比如访问路径为/test/sample?postId=64，endpoint可以直接从请求对象里读取参数：

  // src/routes/test/sample.ts
  export async function get({ url }) {
      const postId = url.searchParams.get('postId');
      return {
          body: {
              message: `Selected post id is : ${postId}`,
              postId: Number(postId)
          }
      };
  }
  

  组件里需要更新postId的时候，直接调用SvelteKit内置的goto方法跳转到带新查询参数的路径，就会自动重新触发endpoint执行拿到对应新数据。

• 方式二：单独封装接口客户端主动调用
  如果不想改动路由路径，可以单独写一个接收postId参数的API接口，等组件里postId确定之后，主动用fetch调用接口拿数据：
  先新建接口文件src/routes/api/post/[postId].ts：

  export async function get({ params }) {
      return {
          body: {
              message: `Selected post id is : ${params.postId}`
          }
      }
  }
  

  再修改组件代码，在postId初始化完成后调用接口：

  <script>
      import { onMount } from 'svelte';
      let message = '';
      const postId = 64; // 组件内定义的动态postId
  
      onMount(async () => {
          const res = await fetch(`/api/post/${postId}`);
          const data = await res.json();
          message = data.message;
      })
  </script>
  
  <h1>{message}</h1>
  

注意：不要试图用全局变量在组件和endpoint之间传值，SvelteKit服务端是无状态运行的，全局变量会因为多实例部署、冷启动等问题出现值错乱，生产环境禁止这么写。

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