面试题：Solid.js中createStore在复杂应用场景下的状态同步

架构设计思路

创建全局状态存储：使用 createStore 创建一个用于存储共享状态（如购物车信息）的全局存储。这个存储将作为整个应用中不同页面组件获取和更新共享状态的单一数据源。
状态封装与抽象：将与共享状态相关的操作（如添加商品到购物车、移除商品等）封装成函数，这些函数可以直接操作 createStore 创建的存储。这样可以使状态的修改逻辑集中管理，提高代码的可维护性。
组件连接：不同页面的组件通过读取和更新这个全局存储来实现状态的共享与同步。Solid.js 的响应式系统会自动处理状态变化时组件的重新渲染。

具体代码实现思路

安装 Solid.js：确保项目中已经安装了 Solid.js。
创建共享状态存储：

import { createStore } from'solid-js';

// 创建购物车状态存储
const [cart, setCart] = createStore({
  items: [],
  totalPrice: 0
});

封装状态操作函数：

// 添加商品到购物车
const addToCart = (product) => {
  setCart('items', [...cart.items, product]);
  setCart('totalPrice', cart.totalPrice + product.price);
};

// 从购物车移除商品
const removeFromCart = (productIndex) => {
  const newItems = [...cart.items];
  const removedProduct = newItems.splice(productIndex, 1)[0];
  setCart('items', newItems);
  setCart('totalPrice', cart.totalPrice - removedProduct.price);
};

在组件中使用共享状态：

import { createComponent } from'solid-js';

const CartComponent = createComponent(() => {
  return (
    <div>
      <h2>购物车</h2>
      <ul>
        {cart.items.map((item, index) => (
          <li key={index}>
            {item.name} - ${item.price}
            <button onClick={() => removeFromCart(index)}>移除</button>
          </li>
        ))}
      </ul>
      <p>总价: ${cart.totalPrice}</p>
    </div>
  );
});

const ProductComponent = createComponent(() => {
  const product = { name: '示例商品', price: 10 };
  return (
    <div>
      <h2>商品</h2>
      <p>{product.name} - ${product.price}</p>
      <button onClick={() => addToCart(product)}>加入购物车</button>
    </div>
  );
});

在应用中组合组件：

import { render } from'solid-js/web';

const App = createComponent(() => {
  return (
    <div>
      <CartComponent />
      <ProductComponent />
    </div>
  );
});

render(() => <App />, document.getElementById('app'));

通过以上步骤，利用 Solid.js 的 createStore 实现了多页面电商应用中不同页面组件间共享状态（购物车信息）的管理与同步。

星途面试题库

面试题：Solid.js中createStore在复杂应用场景下的状态同步

知识考点

面试题答案

架构设计思路

具体代码实现思路