Solid Start中如何在会话中获取和设置简单数据或变量？

1. useSession 仅能在服务端环境使用：vinxi的useSession是服务端专属API，客户端组件没有会话上下文支撑，直接调用必然抛出错误。
2. 客户端无法直接修改会话数据：会话数据要么存在服务端，要么是以加密形式存储在Cookie中，客户端直接修改session.data既无效，还会触发逻辑错误，必须通过服务端逻辑完成更新。

方案1：用服务端组件处理会话（适合直接渲染会话数据的场景） #

把组件改为服务端组件，在服务端环境中完成会话的读取与修改：

// 文件名改为 index.server.jsx（vinxi通过后缀识别服务端组件）
import { useSession } from "vinxi/http";

function getSession() {
  return useSession({
    password: process.env.SESSION_SECRET
  });
}

export default function Index() {
  const session = getSession();
  // 服务端可安全修改会话数据
  session.data.user = "adam";
  const username = session.data.user;
  
  return (
    <div>
      <p>Username: {username}</p>
    </div>
  );
}

方案2：客户端通过API修改会话（适合客户端交互触发会话更新的场景） #

如果需要在客户端操作会话，得先创建服务端API路由，再由客户端通过HTTP请求调用：

第一步：创建设置用户的服务端API路由 #

// app/routes/api/set-user.js
import { useSession } from "vinxi/http";

export default function SetUser() {
  const session = useSession({
    password: process.env.SESSION_SECRET
  });
  session.data.user = "adam";
  // 保存会话并返回结果
  return new Response(JSON.stringify({ success: true }), {
    headers: { "Content-Type": "application/json" }
  });
}

第二步：创建获取用户的服务端API路由 #

// app/routes/api/get-user.js
import { useSession } from "vinxi/http";

export default function GetUser() {
  const session = useSession({
    password: process.env.SESSION_SECRET
  });
  return new Response(JSON.stringify({ user: session.data.user }), {
    headers: { "Content-Type": "application/json" }
  });
}

第三步：客户端组件调用API并展示数据 #

// 客户端组件 index.jsx
import { useState, useEffect } from "react";

export default function Index() {
  const [username, setUsername] = useState(null);

  useEffect(() => {
    // 先调用API设置用户
    fetch("/api/set-user")
      .then(res => res.json())
      .then(() => {
        // 再调用API获取会话中的用户数据
        fetch("/api/get-user")
          .then(res => res.json())
          .then(data => setUsername(data.user));
      });
  }, []);

  return (
    <div>
      <p>Username: {username || "Loading..."}</p>
    </div>
  );
}

• 所有涉及useSession的操作必须放在服务端环境（服务端组件、API路由）。
• 客户端与会话的交互只能通过HTTP请求调用服务端API完成，不能直接操作会话对象。

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