面试题：Qwik中useStore状态持久化的基本使用

Question

请描述在Qwik项目中，如何使用useStore实现一个简单的计数器状态持久化，包括初始化计数器值、增加和减少计数器值的具体代码实现步骤以及如何确保状态在页面刷新后依然保持？

Answer 1

1. 初始化项目：
   • 确保你已经创建了一个Qwik项目。如果没有，可以使用npm create qwik@latest命令创建。
2. 安装必要依赖：
   • 在Qwik项目中，useStore是@builder.io/qwik库的一部分，一般项目创建时已安装。如果没有，可运行npm install @builder.io/qwik。
3. 实现计数器状态持久化：
   • 初始化计数器值：
     • 在组件文件（例如Counter.tsx）中引入useStore。

     import { component$, useStore } from '@builder.io/qwik';
     import { useLocalStorage } from '@builder.io/qwik-city';
     
     const Counter = component$(() => {
       const initialValue = parseInt(useLocalStorage('counter', '0')) || 0;
       const store = useStore({
         count: initialValue
       });
       return (
         // 组件返回内容
       );
     });
     
     export default Counter;
     

   • 增加计数器值：
     • 在组件中添加一个按钮，点击按钮增加计数器的值，并更新localStorage。

     import { component$, useStore } from '@builder.io/qwik';
     import { useLocalStorage } from '@builder.io/qwik-city';
     
     const Counter = component$(() => {
       const initialValue = parseInt(useLocalStorage('counter', '0')) || 0;
       const store = useStore({
         count: initialValue
       });
       const increment = () => {
         store.count++;
         useLocalStorage('counter', store.count.toString());
       };
       return (
         <div>
           <p>Count: {store.count}</p>
           <button onClick={increment}>Increment</button>
         </div>
       );
     });
     
     export default Counter;
     

   • 减少计数器值：
     • 类似地，添加一个按钮，点击按钮减少计数器的值，并更新localStorage。

     import { component$, useStore } from '@builder.io/qwik';
     import { useLocalStorage } from '@builder.io/qwik-city';
     
     const Counter = component$(() => {
       const initialValue = parseInt(useLocalStorage('counter', '0')) || 0;
       const store = useStore({
         count: initialValue
       });
       const increment = () => {
         store.count++;
         useLocalStorage('counter', store.count.toString());
       };
       const decrement = () => {
         if (store.count > 0) {
           store.count--;
           useLocalStorage('counter', store.count.toString());
         }
       };
       return (
         <div>
           <p>Count: {store.count}</p>
           <button onClick={increment}>Increment</button>
           <button onClick={decrement}>Decrement</button>
         </div>
       );
     });
     
     export default Counter;
     

   • 确保状态在页面刷新后依然保持：
     • 通过useLocalStorage钩子，在组件初始化时从localStorage读取计数器的值作为初始值。
     • 在每次计数器值变化（增加或减少）时，更新localStorage中的值。这样，当页面刷新时，组件重新初始化，从localStorage读取到的依然是上次变化后的值，从而实现状态持久化。