面试题：Qwik中useContext实现全局状态管理的基础用法

Question

在Qwik项目中，如果要通过useContext实现一个简单的全局用户登录状态管理，该如何进行操作？请简述实现步骤并给出关键代码示例。

Answer 1

1. 创建上下文：
   • 首先，在项目中创建一个上下文对象来存储用户登录状态。在JavaScript中，可以使用createContext函数，在Qwik项目中同样适用。假设项目使用TypeScript，可以这样定义上下文：

   import { createContext } from '@builder.io/qwik';
   
   // 定义用户登录状态的类型
   type UserLoginState = {
       isLoggedIn: boolean;
       userInfo?: any;
   };
   
   // 创建上下文
   const UserLoginContext = createContext<UserLoginState>({
       isLoggedIn: false
   });
   

2. 提供上下文：
   • 在应用的顶层组件中，通过useContextProvider来提供上下文。假设顶层组件是App组件：

   import { component$, useContextProvider } from '@builder.io/qwik';
   
   const App = component$(() => {
       const initialState: UserLoginState = {
           isLoggedIn: false
       };
       useContextProvider(UserLoginContext, initialState);
   
       return (
           <div>
               {/* 应用的其他内容 */}
           </div>
       );
   });
   
   export default App;
   

3. 使用上下文：
   • 在需要使用用户登录状态的组件中，通过useContext来获取上下文状态。例如，在一个Profile组件中：

   import { component$, useContext } from '@builder.io/qwik';
   
   const Profile = component$(() => {
       const userLoginState = useContext(UserLoginContext);
   
       return (
           <div>
               {userLoginState.isLoggedIn? (
                   <p>用户已登录</p>
               ) : (
                   <p>用户未登录</p>
               )}
           </div>
       );
   });
   
   export default Profile;
   

4. 更新上下文状态：
   • 为了能够更新用户登录状态，我们可以在上下文中添加更新函数。首先修改上下文定义：

   import { createContext } from '@builder.io/qwik';
   
   type UserLoginState = {
       isLoggedIn: boolean;
       userInfo?: any;
       setLoginState: (isLoggedIn: boolean, userInfo?: any) => void;
   };
   
   const UserLoginContext = createContext<UserLoginState>({
       isLoggedIn: false,
       setLoginState: () => {}
   });
   

   • 然后在顶层组件中，通过useSignal来管理状态，并提供更新函数：

   import { component$, useContextProvider, useSignal } from '@builder.io/qwik';
   
   const App = component$(() => {
       const userLoginState = useSignal<UserLoginState>({
           isLoggedIn: false,
           setLoginState: (isLoggedIn, userInfo) => {
               userLoginState.value.isLoggedIn = isLoggedIn;
               if (userInfo) {
                   userLoginState.value.userInfo = userInfo;
               }
           }
       });
   
       useContextProvider(UserLoginContext, userLoginState.value);
   
       return (
           <div>
               {/* 应用的其他内容 */}
           </div>
       );
   });
   
   export default App;
   

   • 在需要更新状态的组件中，获取上下文并调用更新函数：

   import { component$, useContext } from '@builder.io/qwik';
   
   const LoginButton = component$(() => {
       const userLoginState = useContext(UserLoginContext);
   
       const handleLogin = () => {
           userLoginState.setLoginState(true, { name: 'John Doe' });
       };
   
       return (
           <button onClick={handleLogin}>
               登录
           </button>
       );
   });
   
   export default LoginButton;