面试题：Solid.js 中如何在路由间共享简单数据

Question

假设你正在使用 Solid.js 构建一个应用，有多个路由页面，现在需要在不同路由页面之间共享一些简单数据（如用户的登录状态布尔值），请描述实现这种路由间共享数据的基本步骤，并给出关键代码示例。

Answer 1

基本步骤

1. 创建共享状态：使用 Solid.js 的 createSignal 创建用于存储共享数据（如用户登录状态布尔值）的信号。
2. 将共享状态提升到共同祖先组件：这样所有路由页面都可以访问该状态。
3. 在路由页面中使用共享状态：通过传递或上下文等方式，让每个路由页面能够读取和更新共享状态。

关键代码示例

import { createSignal } from 'solid-js';
import { Routes, Route } from'solid-router';

// 创建共享状态
const [isLoggedIn, setIsLoggedIn] = createSignal(false);

const App = () => {
  return (
    <div>
      <Routes>
        <Route path="/login" component={() => (
          <button onClick={() => setIsLoggedIn(true)}>登录</button>
        )} />
        <Route path="/home" component={() => (
          <div>
            {isLoggedIn()? <p>已登录</p> : <p>未登录</p>}
          </div>
        )} />
      </Routes>
    </div>
  );
};

export default App;

在上述代码中，createSignal 创建了 isLoggedIn 信号来表示用户登录状态，setIsLoggedIn 用于更新状态。在不同路由组件中，直接使用 isLoggedIn 读取状态，通过 setIsLoggedIn 更新状态，实现了路由间共享数据。