面试题：Solid.js 中 createSignal 如何与全局状态集成

Question

在 Solid.js 项目里，假设已有一个通过 createSignal 创建的局部状态变量，阐述如何将其集成到全局状态管理中，以实现组件间的状态共享。请给出具体思路和关键代码示例。

Answer 1

1. 具体思路：
   • 首先，在Solid.js中，可以使用createStore来创建一个全局状态存储。
   • 然后，将通过createSignal创建的局部状态变量的值同步到全局状态中。
   • 组件间通过读取全局状态来实现状态共享，并且在局部状态变化时更新全局状态，全局状态变化时也能影响到相关组件。
2. 关键代码示例：
   • 假设已有通过createSignal创建的局部状态变量：

   import { createSignal } from'solid-js';
   
   const [localValue, setLocalValue] = createSignal(0);
   

   • 创建全局状态管理：

   import { createStore } from'solid-js';
   
   const [globalState, setGlobalState] = createStore({
       sharedValue: 0
   });
   

   • 将局部状态集成到全局状态：

   localValue.subscribe((newLocalValue) => {
       setGlobalState('sharedValue', newLocalValue);
   });
   
   globalState.subscribe((newGlobalValue) => {
       if (newGlobalValue.sharedValue!== localValue()) {
           setLocalValue(newGlobalValue.sharedValue);
       }
   });
   

   • 在组件中使用共享状态：

   import { createComponent } from'solid-js';
   
   const MyComponent = createComponent(() => {
       return (
           <div>
               <p>Local Value: {localValue()}</p>
               <p>Global Shared Value: {globalState.sharedValue}</p>
               <button onClick={() => setLocalValue(localValue() + 1)}>Increment Local</button>
               <button onClick={() => setGlobalState('sharedValue', globalState.sharedValue + 1)}>Increment Global</button>
           </div>
       );
   });