面试题：Qwik中如何实现简单的全局状态管理

Question

在Qwik应用中，假设你需要管理一个全局的用户登录状态，从用户登录、登出到状态的传递与使用，描述你会采用怎样的步骤和技术手段来实现这一简单的全局状态管理。

Answer 1

1. 选择状态管理方案：
   • 在Qwik中，可以使用$store来管理全局状态。$store是Qwik提供的一种简单且高效的状态管理方式，它基于响应式编程原理。
2. 定义用户登录状态：
   • 创建一个Qwik store，例如在src/store/user.ts文件中：

   import { component$, useStore } from '@builder.io/qwik';
   
   const userStore = component$(() => {
     const store = useStore({
       isLoggedIn: false,
       userInfo: null
     });
   
     return {
       store
     };
   });
   
   export default userStore;
   

   • 这里定义了一个userStore，其中包含isLoggedIn（表示用户是否登录）和userInfo（存储用户信息，初始为null）两个状态。
3. 实现用户登录逻辑：
   • 在登录相关的组件中，导入userStore并更新状态。假设在LoginComponent.tsx中：

   import { component$ } from '@builder.io/qwik';
   import userStore from '../store/user.ts';
   
   const LoginComponent = component$(() => {
     const { store } = userStore();
   
     const handleLogin = async (credentials) => {
       // 这里进行实际的登录逻辑，例如向服务器发送请求验证用户
       const response = await fetch('/api/login', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
         },
         body: JSON.stringify(credentials)
       });
   
       if (response.ok) {
         const userData = await response.json();
         store.isLoggedIn = true;
         store.userInfo = userData;
       }
     };
   
     return (
       <div>
         {/* 登录表单 */}
         <form onSubmit={(e) => {
           e.preventDefault();
           const username = e.target.username.value;
           const password = e.target.password.value;
           handleLogin({ username, password });
         }}>
           <input type="text" name="username" placeholder="Username" />
           <input type="password" name="password" placeholder="Password" />
           <button type="submit">Login</button>
         </form>
       </div>
     );
   });
   
   export default LoginComponent;
   

4. 实现用户登出逻辑：
   • 在登出相关的组件中，同样导入userStore并更新状态。假设在LogoutComponent.tsx中：

   import { component$ } from '@builder.io/qwik';
   import userStore from '../store/user.ts';
   
   const LogoutComponent = component$(() => {
     const { store } = userStore();
   
     const handleLogout = () => {
       // 这里可以进行向服务器发送登出请求等操作
       store.isLoggedIn = false;
       store.userInfo = null;
     };
   
     return (
       <div>
         <button onClick={handleLogout}>Logout</button>
       </div>
     );
   });
   
   export default LogoutComponent;
   

5. 状态的传递与使用：
   • 在需要使用用户登录状态的组件中，导入userStore。例如在ProtectedComponent.tsx（只有登录用户可见的组件）中：

   import { component$ } from '@builder.io/qwik';
   import userStore from '../store/user.ts';
   
   const ProtectedComponent = component$(() => {
     const { store } = userStore();
   
     if (!store.isLoggedIn) {
       return null;
     }
   
     return (
       <div>
         <p>Welcome, {store.userInfo.username}</p>
         {/* 这里可以展示只有登录用户可见的内容 */}
       </div>
     );
   });
   
   export default ProtectedComponent;
   

   • 通过这种方式，userStore中的状态在整个Qwik应用中被共享和使用，实现了全局的用户登录状态管理。