Vue计算属性单产品数据在模板为空，生命周期钩子打印正常

问题根因 #

核心问题是Vue的computed属性不支持异步逻辑返回值：
你在存在pid查询参数的分支中发起的axios.get是异步请求，代码执行到return Object.assign(product)时，axios的响应回调还未触发，此时返回的是仅包含一个空对象的数组。后续回调中修改数组内部属性时，这个数组本身不属于Vue的响应式数据，修改操作不会触发视图更新，因此模板读取到的始终是初始的空数据。
你在beforeMount钩子中打印能看到完整数据，是因为浏览器控制台对引用类型数据的展示为延迟快照，你展开打印结果时异步请求已经完成，所以能看到更新后的值，和实际渲染逻辑的执行时序不一致。

修复方案 #

不要在computed中处理异步请求，将单商品数据存在响应式的data字段中，监听路由参数变化触发异步请求，computed仅做数据源的判断返回即可。

步骤1：新增data字段存储单商品数据

data() {
  return {
    // 存储单独购买场景的商品数据
    singleProduct: null
  }
}

步骤2：添加路由参数监听，触发异步请求

watch: {
  '$route.query.pid': {
    // 页面初始化时立即执行一次判断
    immediate: true,
    handler(newPid) {
      if (newPid) {
        axios.get(`/api/products/${newPid}`).then(response => {
          const rawItem = response.data[0]
          // 给响应式字段赋值，触发视图更新
          this.singleProduct = [{
            id: rawItem.id,
            name: rawItem.name,
            units: rawItem.units,
            image: rawItem.product_image[0].image,
            price: rawItem.price,
            quantity: 1
          }]
        })
      } else {
        this.singleProduct = null
      }
    }
  }
}

步骤3：简化computed逻辑

computed: {
  products() {
    // 单商品数据存在时优先返回，否则返回购物车数据
    return this.singleProduct || this.$store.state.cart
  }
}

这样修改后，无论是单独购买场景还是购物车场景，products返回的都是响应式数据，模板可以正常读取到值。

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