面试题：Svelte派生存储在复杂业务场景中的优化

Question

假设你正在开发一个电商应用，有一个商品列表，每个商品有价格和库存数量。你需要创建一个派生存储来计算购物车中所有商品的总价，同时要考虑库存不足时的处理逻辑，并且要优化性能，避免不必要的重新计算。请描述你的实现思路并给出关键代码片段。

Answer 1

实现思路

1. 创建购物车数据结构：用于存储加入购物车的商品及其数量。
2. 派生存储：使用响应式编程或类似机制，当购物车内容变化时重新计算总价。
3. 库存检查：在添加商品到购物车时，检查库存是否充足。
4. 性能优化：通过依赖跟踪机制，只有购物车中相关商品变化时才重新计算总价。

关键代码片段（以JavaScript和Vuex为例）

// Vuex store
const store = new Vuex.Store({
  state: {
    cart: [], // 购物车，数组中每个元素是 { product, quantity } 的对象
    products: [
      { id: 1, price: 10, stock: 5 },
      { id: 2, price: 20, stock: 3 }
    ]
  },
  getters: {
    totalPrice: state => {
      return state.cart.reduce((total, item) => {
        const product = state.products.find(p => p.id === item.product.id);
        return total + product.price * item.quantity;
      }, 0);
    }
  },
  mutations: {
    addToCart(state, { product, quantity }) {
      const existingItem = state.cart.find(item => item.product.id === product.id);
      if (existingItem) {
        if (product.stock >= existingItem.quantity + quantity) {
          existingItem.quantity += quantity;
        } else {
          console.error('库存不足');
        }
      } else {
        if (product.stock >= quantity) {
          state.cart.push({ product, quantity });
        } else {
          console.error('库存不足');
        }
      }
    }
  }
});

在上述代码中：

• state.cart 存储购物车中的商品及数量。
• getters.totalPrice 计算购物车的总价。
• mutations.addToCart 在添加商品到购物车时检查库存，并更新购物车状态。当库存不足时，打印错误信息。这种实现方式利用Vuex的依赖跟踪机制，只有购物车内容变化时 totalPrice 才会重新计算，优化了性能。