面试题：Vuex在复杂业务场景下的架构设计

1. 设计 `state` 结构

商品展示模块：

{
  products: [], // 存储所有商品列表
  productDetails: null, // 当前查看的商品详情
  filteredProducts: [] // 搜索或筛选后的商品列表
}

购物车模块：

{
  cartItems: [], // 购物车中的商品项，包含商品信息及数量等
  cartTotal: 0 // 购物车商品总价
}

用户登录与权限管理模块：

{
  user: null, // 登录用户信息
  isLoggedIn: false, // 是否已登录
  userPermissions: [] // 用户权限列表
}

订单流程模块：

{
  orderDetails: null, // 订单详情信息
  orderStatus: '未提交' // 订单状态，如未提交、已提交、已支付等
}

2. 规划 `mutations` 逻辑

商品展示模块：

设置商品列表：

SET_PRODUCTS(state, products) {
  state.products = products;
}

设置商品详情：

SET_PRODUCT_DETAILS(state, productDetails) {
  state.productDetails = productDetails;
}

设置筛选后的商品列表：

SET_FILTERED_PRODUCTS(state, filteredProducts) {
  state.filteredProducts = filteredProducts;
}

购物车模块：

添加商品到购物车：

ADD_TO_CART(state, item) {
  const existingItem = state.cartItems.find(cartItem => cartItem.product.id === item.product.id);
  if (existingItem) {
    existingItem.quantity++;
  } else {
    state.cartItems.push({...item, quantity: 1 });
  }
  state.cartTotal += item.product.price;
}

从购物车移除商品：

REMOVE_FROM_CART(state, item) {
  state.cartItems = state.cartItems.filter(cartItem => cartItem.product.id!== item.product.id);
  state.cartTotal -= item.product.price * item.quantity;
}

更新购物车商品数量：

UPDATE_CART_ITEM_QUANTITY(state, { item, quantity }) {
  const existingItem = state.cartItems.find(cartItem => cartItem.product.id === item.product.id);
  if (existingItem) {
    const priceDiff = (quantity - existingItem.quantity) * existingItem.product.price;
    state.cartTotal += priceDiff;
    existingItem.quantity = quantity;
  }
}

用户登录与权限管理模块：

设置用户登录状态：

SET_USER_LOGGED_IN(state, user) {
  state.user = user;
  state.isLoggedIn = true;
  state.userPermissions = user.permissions;
}

设置用户登出状态：

SET_USER_LOGGED_OUT(state) {
  state.user = null;
  state.isLoggedIn = false;
  state.userPermissions = [];
}

订单流程模块：

设置订单详情：

SET_ORDER_DETAILS(state, orderDetails) {
  state.orderDetails = orderDetails;
}

更新订单状态：

UPDATE_ORDER_STATUS(state, status) {
  state.orderStatus = status;
}

3. 规划 `actions` 逻辑

商品展示模块：

获取商品列表：

async GET_PRODUCTS({ commit }) {
  try {
    const response = await axios.get('/api/products');
    commit('SET_PRODUCTS', response.data);
  } catch (error) {
    console.error('获取商品列表失败', error);
  }
}

获取商品详情：

async GET_PRODUCT_DETAILS({ commit }, productId) {
  try {
    const response = await axios.get(`/api/products/${productId}`);
    commit('SET_PRODUCT_DETAILS', response.data);
  } catch (error) {
    console.error('获取商品详情失败', error);
  }
}

筛选商品：

async FILTER_PRODUCTS({ commit }, filterParams) {
  try {
    const response = await axios.post('/api/products/filter', filterParams);
    commit('SET_FILTERED_PRODUCTS', response.data);
  } catch (error) {
    console.error('筛选商品失败', error);
  }
}

购物车模块：

添加商品到购物车：

ADD_TO_CART({ commit }, item) {
  commit('ADD_TO_CART', item);
  // 可以在此处添加保存购物车到服务器的逻辑
}

从购物车移除商品：

REMOVE_FROM_CART({ commit }, item) {
  commit('REMOVE_FROM_CART', item);
  // 可以在此处添加更新服务器购物车数据的逻辑
}

更新购物车商品数量：

UPDATE_CART_ITEM_QUANTITY({ commit }, { item, quantity }) {
  commit('UPDATE_CART_ITEM_QUANTITY', { item, quantity });
  // 可以在此处添加更新服务器购物车商品数量的逻辑
}

用户登录与权限管理模块：

用户登录：

async LOGIN({ commit }, credentials) {
  try {
    const response = await axios.post('/api/login', credentials);
    commit('SET_USER_LOGGED_IN', response.data.user);
    return response.data;
  } catch (error) {
    console.error('登录失败', error);
    throw error;
  }
}

用户登出：

async LOGOUT({ commit }) {
  try {
    await axios.post('/api/logout');
    commit('SET_USER_LOGGED_OUT');
  } catch (error) {
    console.error('登出失败', error);
  }
}

订单流程模块：

创建订单：

async CREATE_ORDER({ commit, state }) {
  try {
    const response = await axios.post('/api/orders', {
      products: state.cartItems,
      user: state.user
    });
    commit('SET_ORDER_DETAILS', response.data);
    commit('UPDATE_ORDER_STATUS', '已提交');
    // 清空购物车
    commit('SET_CART_ITEMS', []);
    commit('SET_CART_TOTAL', 0);
    return response.data;
  } catch (error) {
    console.error('创建订单失败', error);
    throw error;
  }
}

更新订单状态：

async UPDATE_ORDER_STATUS({ commit }, status) {
  try {
    const response = await axios.put('/api/orders/status', { status });
    commit('UPDATE_ORDER_STATUS', status);
    return response.data;
  } catch (error) {
    console.error('更新订单状态失败', error);
    throw error;
  }
}

4. 处理不同模块间状态的交互

购物车与商品展示模块：
- 当从商品展示页面添加商品到购物车时，购物车的 cartItems 和 cartTotal 状态会更新，同时商品展示模块可能需要更新库存等相关状态（如果有实时库存更新需求）。
- 在 actions 中，可以通过调用不同模块的 mutations 来实现这种交互。例如，在 ADD_TO_CART action 中，除了更新购物车的 mutations，可以触发商品展示模块更新库存的 mutations。
用户登录与购物车、订单模块：
- 用户登录后，购物车和订单模块可能需要关联当前用户信息。比如，购物车数据可能需要从服务器加载当前用户的购物车数据，订单模块在创建订单时需要使用登录用户的信息。
- 在 LOGIN action 中，可以触发购物车模块加载用户购物车数据的 action，以及在订单模块 CREATE_ORDER action 中直接使用 state.user 信息。
订单模块与购物车模块：
- 创建订单成功后，购物车应该清空。在 CREATE_ORDER action 中，除了更新订单相关状态，还可以调用购物车模块清空购物车的 mutations 来实现这种交互。

通过以上基于 Vuex 的架构设计，可以有效管理电商平台复杂业务场景下的状态，确保状态管理的清晰、可维护以及高效。同时，利用 Vuex 的模块化特性，可以进一步组织和管理不同功能模块的状态、mutations 和 actions，提高代码的可维护性和扩展性。

面试题：Vuex在复杂业务场景下的架构设计

知识考点

面试题答案

1. 设计 `state` 结构

2. 规划 `mutations` 逻辑

3. 规划 `actions` 逻辑

4. 处理不同模块间状态的交互

面试题：Vuex在复杂业务场景下的架构设计

知识考点

面试题答案

1. 设计 state 结构

2. 规划 mutations 逻辑

3. 规划 actions 逻辑

4. 处理不同模块间状态的交互

1. 设计 `state` 结构

2. 规划 `mutations` 逻辑

3. 规划 `actions` 逻辑