Vue Storefront添加商品到购物车时出现产品类型未定义错误

错误根源 #

1. 传给addItem的product是数组而非单个产品对象：你把prodDetail.value（对应productDetail.items，是数组）直接传进去了，但addItem需要的是单个产品实体
2. quantity定义为字符串类型：购物车接口要求数量是数字，字符串会导致异常
3. 未校验产品是否加载完成：如果还没拿到产品数据就调用addItem，会传递undefined导致类型报错
4. load调用错误：productHandler里的await load没加括号，没有实际执行加载购物车的方法

修复代码 #

修改后的<script>部分：

<script>
import {ref} from '@nuxtjs/composition-api';
import {useProduct, useCart} from '~/composables';
import {SfImage, SfTile, SfHeading, SfPrice, SfSelect, SfAddToCart} from '@storefront-ui/vue';
import productGetters from '~/modules/catalog/product/getters/productGetters';

export default {
  components: {
    SfTile,
    SfImage,
    SfHeading,
    SfPrice,
    SfSelect,
    SfAddToCart
  },
  setup() {
    const searchHandler = ref('');
    const product = ref([]);
    const prodDetail = ref([])
    // 改为数字类型，默认设为1
    const quantity = ref(1)
    const {
      getProductList,
      getProductDetails,
    } = useProduct();
    const {
      addItem,
      load,
      isInCart,
      error
    } = useCart()
    const buttonHandler = async () => {
      const productList = await getProductList(
        {
          filter: {
            sku: {
              eq: searchHandler.value.toString()
            }
          }
        }
      )
      const productDetail = await getProductDetails(
        {
          filter: {
            sku: {
              eq: searchHandler.value.toString()
            }
          }
        }
      )
      prodDetail.value = productDetail.items
      product.value = productList.items

      console.log(product.value[0], 'product list')
      console.log(prodDetail.value[0], 'product detail')
    }
// add to cart handler
    const addToCartHandler = async () => {
      // 先校验产品是否存在
      if (!prodDetail.value.length) {
        console.warn('产品未加载，请先搜索产品');
        return;
      }
      // 取第一个产品对象，转换quantity为数字
      const productValue = await addItem({
        product: prodDetail.value[0],
        quantity: Number(quantity.value)
      })
      console.log(error.value,"error in composable")
      console.log(productValue,'product added to the cart')
      console.log(quantity.value, 'quantity of the product')
    }
    // get product handler
    const productHandler = async () => {
      // 执行load方法，加括号
      await load()
      console.log(isInCart(),"cart values")
    }
    return {
      searchHandler,
      product,
      productGetters,
      buttonHandler,
      prodDetail,
      addToCartHandler,
      SfImage,
      SfTile,
      SfHeading,
      SfPrice,
      SfSelect,
      SfAddToCart,
      getProductDetails,
      getProductList,
      quantity,
      productHandler
    }
  }
}
</script>

关键修改点 #

• 将quantity初始化为数字类型ref(1)，避免字符串转数字的潜在问题
• addToCartHandler中添加产品存在性校验，确保只有拿到产品数据后才执行添加操作
• 传递prodDetail.value[0]给addItem的product参数，确保是单个产品对象
• 修正load()的调用方式，添加括号执行方法
• 输出error.value而非error，因为error是ref对象，需要取.value获取实际错误内容

内容的提问来源于stack exchange，提问作者Muhammad Usman