面试题：Solid.js 中如何使用 createStore 实现简单的全局状态管理

Question

假设你正在开发一个 Solid.js 应用，需要实现一个全局的用户登录状态管理，包括登录、注销功能。请描述使用 createStore 实现这一功能的步骤，并给出关键代码示例。

Answer 1

1. 安装 Solid.js 相关依赖：确保项目中已安装 solid-js 和 solid-js/store。
2. 创建全局状态：
   • 在项目合适位置（如 store.js）引入 createStore 并创建用户登录状态的存储。

   import { createStore } from'solid-js/store';
   
   const [userStore, setUserStore] = createStore({
       isLoggedIn: false,
       userInfo: null
   });
   

3. 实现登录功能：
   • 创建一个登录函数，用于更新 userStore 中的状态。

   const login = (userData) => {
       setUserStore({
           isLoggedIn: true,
           userInfo: userData
       });
   };
   

4. 实现注销功能：
   • 创建一个注销函数，将 userStore 状态重置。

   const logout = () => {
       setUserStore({
           isLoggedIn: false,
           userInfo: null
       });
   };
   

5. 在组件中使用：
   • 在需要使用登录状态的组件中引入 userStore。

   import { userStore } from './store.js';
   
   const MyComponent = () => {
       return (
           <div>
               {userStore.isLoggedIn? (
                   <p>Welcome, {userStore.userInfo.name}</p>
               ) : (
                   <p>Please log in</p>
               )}
           </div>
       );
   };