面试题：Vuex在Vue电商项目商品模块中的应用

1. 商品列表数据获取与缓存

定义state：在Vuex的state中定义一个数组来存储商品列表数据，例如：

state: {
  productList: []
}

定义actions：通过actions来异步获取商品列表数据，例如使用axios发送HTTP请求。

actions: {
  async fetchProductList({ commit }) {
    try {
      const response = await axios.get('/api/products');
      commit('SET_PRODUCT_LIST', response.data);
    } catch (error) {
      console.error('Error fetching product list:', error);
    }
  }
}

定义mutations：用于修改state中的商品列表数据。

mutations: {
  SET_PRODUCT_LIST(state, products) {
    state.productList = products;
  }
}

组件中使用：在商品列表组件中，通过mapActions辅助函数调用fetchProductList方法来获取数据，并通过mapState辅助函数来获取productList数据进行展示。

<template>
  <div>
    <ul>
      <li v-for="product in productList" :key="product.id">{{ product.name }}</li>
    </ul>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';

export default {
  computed: {
   ...mapState(['productList'])
  },
  methods: {
   ...mapActions(['fetchProductList']),
    async mounted() {
      await this.fetchProductList();
    }
  }
};
</script>

2. 购物车中商品数量更新

定义state：在state中定义一个对象来存储购物车商品信息，对象的键为商品ID，值为商品数量，例如：

state: {
  cart: {}
}

定义mutations：用于更新购物车中商品数量。

mutations: {
  ADD_TO_CART(state, productId) {
    if (state.cart[productId]) {
      state.cart[productId]++;
    } else {
      state.cart[productId] = 1;
    }
  },
  UPDATE_CART_QUANTITY(state, { productId, quantity }) {
    state.cart[productId] = quantity;
  },
  REMOVE_FROM_CART(state, productId) {
    if (state.cart[productId]) {
      delete state.cart[productId];
    }
  }
}

定义actions：可以在actions中进行一些异步操作，例如在更新购物车数量后向服务器发送请求保存购物车数据。

actions: {
  addToCart({ commit }, productId) {
    commit('ADD_TO_CART', productId);
    // 这里可以添加异步保存购物车数据到服务器的逻辑
  },
  updateCartQuantity({ commit }, { productId, quantity }) {
    commit('UPDATE_CART_QUANTITY', { productId, quantity });
    // 同样可以添加异步保存逻辑
  },
  removeFromCart({ commit }, productId) {
    commit('REMOVE_FROM_CART', productId);
    // 异步删除服务器端购物车数据逻辑
  }
}

组件中使用：在加入购物车按钮或购物车组件中，通过mapActions辅助函数调用相应的actions方法来更新购物车状态。

<template>
  <button @click="addToCart(product.id)">加入购物车</button>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
   ...mapActions(['addToCart'])
  }
};
</script>

3. Vuex核心概念及作用

state：存储应用的状态，如商品列表数据和购物车数据，作为单一数据源，使得整个应用的状态管理变得可预测和易于维护。
mutations：唯一允许修改state的方法，保证了状态变化的可追踪性和原子性。通过提交mutations来更新state，例如SET_PRODUCT_LIST、ADD_TO_CART等mutations。
actions：用于处理异步操作，如获取商品列表数据。actions可以触发mutations，通过commit方法来提交mutations，从而更新state。同时actions也可以包含业务逻辑，如购物车数据保存到服务器等操作。
getters：虽然在上述场景中未详细提及，但getters用于从state派生一些状态，例如计算购物车中商品的总价等。它可以对state中的数据进行加工处理并返回，方便在组件中使用。

面试题：Vuex在Vue电商项目商品模块中的应用

知识考点

面试题答案

1. 商品列表数据获取与缓存

2. 购物车中商品数量更新

3. Vuex核心概念及作用