Vue+Vuex购物车实现超库存限制toast错误提示的方案咨询

提供两种低改造成本的实现方式，可根据你的项目结构选择：

方案1：通过Action返回状态判断（最简改动） #

不需要修改现有mutation逻辑，新增Action封装加购判断，调用后直接在组件侧触发toast即可：

1. 修改store.js新增action：

actions: {    
  addToCart({ commit, state }, product) {
    const findProduct = state.cart.find(o => o.id === product.id)
    // 提前判断是否超库存
    if (findProduct && product.quantity + findProduct.quantity > product.units) {
      commit('addToCart', product)
      // 返回超库存标识
      return { success: false, msg: '该商品库存不足，无法添加更多' }
    }
    commit('addToCart', product)
    return { success: true }
  }
},

2. 修改Home.vue的加购方法，把原来的commit改为dispatch调用action，根据返回结果触发toast：

async addToCart(product) {
  product.quantity = 1;
  const res = await this.$store.dispatch('addToCart', product)
  this.$store.commit('totalItems');
  this.$store.commit('totalPrice');
  // 替换为你项目里的toast调用方法，比如Element UI的this.$message、Vant的Toast等
  if (!res.success) {
    Toast(res.msg)
  }
}

方案2：全局Toast状态管理（适合全项目统一管控提示） #

如果你的项目多处需要触发全局提示，可以在Vuex中统一管理提示状态，全局监听自动触发toast：

1. 修改store.js新增toast相关状态和mutation：

state: {
  // 原有状态不变，新增以下字段
  toastMsg: ''
},
mutations: {
  // 原有mutation不变，新增以下方法
  setToastMsg(state, msg) {
    state.toastMsg = msg
  },
  // 找到addToCart里的//show message位置，新增一行
  addToCart ( state, product ) {
    let findProduct = state.cart.find(o => o.id === product.id)
    if( findProduct ) {
      if ( product.quantity + findProduct.quantity > product.units ) {
        findProduct.quantity = product.units
        // 新增这行设置提示
        this.commit('setToastMsg', '该商品库存不足，无法添加更多')
      } 
      // 原有逻辑不变
  }
}

2. 在全局入口组件（一般是App.vue）中监听toast状态，自动触发提示：

watch: {
  '$store.state.toastMsg'(newVal) {
    if (newVal) {
      // 替换为项目的toast调用方法
      Toast(newVal)
      // 提示显示后清空状态，避免重复触发
      this.$store.commit('setToastMsg', '')
    }
  }
}

该方案可以复用在所有需要全局提示的场景，比如修改购物车数量超库存、删除商品提示等，不需要每个业务组件单独处理toast逻辑。

小优化提示 #

你现有代码中removeFromCart的删除逻辑存在问题：state.cart.pop( this.findProduct )只会删除数组最后一项，无法删除指定商品，建议修改为：

removeFromCart ( state, product ) {
  const index = state.cart.findIndex(o => o.id === product.id)
  if (index > -1) {
    state.cart.splice(index, 1)
  }  
  localStorage.setItem('cart', JSON.stringify(state.cart));
}

内容的提问来源于stack exchange，提问作者Sander Plomp