面试题：Qwik中useStore在中等复杂场景下的应用方式

Question

在一个包含多个组件交互的Qwik应用中，组件A的数据变化需要实时反映到组件B和组件C，并且组件B和C也可能反向影响组件A的数据。请阐述如何使用useStore来管理这种状态，并简单描述关键代码逻辑。

Answer 1

1. 使用useStore管理状态：
   • 在Qwik中，useStore可用于创建共享状态。通过创建一个共享的状态对象，组件A、B和C都可以访问和修改这个状态，从而实现数据的实时同步。
2. 关键代码逻辑：
   • 创建共享状态：

     import { useStore } from '@builder.io/qwik';
     
     const useSharedStore = () => {
       const store = useStore({
         data: 'initial value',// 这是组件A的数据，会影响组件B和C
       });
       return store;
     };
     

   • 组件A：

     import { component$, useContext } from '@builder.io/qwik';
     import { useSharedStore } from './sharedStore';
     
     const ComponentA = component$(() => {
       const sharedStore = useSharedStore();
       const updateData = () => {
         sharedStore.data = 'new value';// 数据变化，会实时反映到组件B和C
       };
       return (
         <div>
           <button onClick={updateData}>Update Data in A</button>
         </div>
       );
     });
     
     export default ComponentA;
     

   • 组件B和C：

     import { component$, useContext } from '@builder.io/qwik';
     import { useSharedStore } from './sharedStore';
     
     const ComponentB = component$(() => {
       const sharedStore = useSharedStore();
       const reverseUpdate = () => {
         sharedStore.data = 'value from B';// 反向影响组件A的数据
       };
       return (
         <div>
           <p>{sharedStore.data}</p>
           <button onClick={reverseUpdate}>Update Data in B</button>
         </div>
       );
     });
     
     export default ComponentB;
     

   • 组件C与组件B类似，通过useSharedStore获取共享状态，并可对其进行修改，实现对组件A数据的反向影响。同时，共享状态的变化会实时反映到组件B和C的视图上。