Vue中如何向Getter传递参数？——购物车商品库存校验场景解决方案

这问题我熟！Vuex的getter默认只能接收state和其他getters作为参数，要传自定义的productID，得让getter返回一个闭包函数才行，我给你一步步改：

1. 重构你的getters.js代码 #

把原来的checkStock改成返回函数的形式，外层拿state，内层接收你的参数：

export const checkStock = (state) => (productID) => { 
  let stockAvailable = true; 
  state.cart.forEach(item => { 
    // 这里建议用严格相等===，避免类型匹配问题
    if(item.product.id === productID) { 
      if(item.product.attributes.stock <= item.amount){ 
        stockAvailable = false; 
      } 
    } 
  }) 
  return stockAvailable; 
}

2. 修正组件里的调用逻辑 #

现在你可以直接在调用getter的时候把productId传进去了：

checkStockAvailability(productId) { 
  // 注意这里要加括号传参，因为getter现在返回的是函数
  return this.$store.getters.checkStock(productId); 
}

为啥原来的写法不行？ #

普通的Vuex getter是「基于state计算值」的纯函数，只能拿到框架给的state/getters参数。如果需要自定义参数，就得让getter返回一个函数——这个函数可以捕获外层的state，同时接收你传入的自定义参数，完美解决你的需求～

内容的提问来源于stack exchange，提问作者magic bean