面试题：Qwik组件状态管理模块化设计之基础应用

Question

在Qwik中，如何通过模块化设计实现一个简单的计数器组件的状态管理？请描述关键步骤并给出核心代码示例。

Answer 1

关键步骤

1. 创建计数器组件文件：在Qwik项目中创建一个新的.tsx文件用于计数器组件，例如Counter.tsx。
2. 定义状态和操作函数：使用useStore钩子来管理状态。状态包含计数器的值，操作函数用于增加或减少计数器的值。
3. 构建UI：在组件中使用状态和操作函数来构建UI，展示计数器的值，并提供按钮来触发状态改变。

核心代码示例

import { component$, useStore } from '@builder.io/qwik';

const Counter = component$(() => {
  const store = useStore({
    count: 0,
    increment: () => {
      store.count++;
    },
    decrement: () => {
      if (store.count > 0) {
        store.count--;
      }
    }
  });

  return (
    <div>
      <p>Count: {store.count}</p>
      <button onClick={store.increment}>Increment</button>
      <button onClick={store.decrement}>Decrement</button>
    </div>
  );
});

export default Counter;

在上述代码中：

• useStore创建了一个包含count状态以及increment和decrement操作函数的状态对象。
• UI部分展示了count的值，并通过按钮点击调用increment和decrement函数来更新状态。