模板未获取计算属性的内容，但在生命周期挂钩中记录正常

Posted 2023-02-23

【中文标题】模板未获取计算属性的内容，但在生命周期挂钩中记录正常

【英文标题】：Content of Computed property not picked up by the template, but is logged ok in lifecycle hook

【发布时间】：2021-09-19 03:53:56

【问题描述】：

我正在创建一个网上商店，您可以选择在不影响购物车内容的情况下订购购物车以外的产品。我实现这一点的方式是为您的购物车项目和单个产品共享一个页面。它检查是否已设置 productID 参数，在这种情况下它使用不同的数据。

这是我写的函数：

    computed : 
        products: function() 
            if ( this.$route.query.pid ) 
                var product = []
                axios.get(`/api/products/$this.pid`).then(response => 
                    product[0].id = response.data[0].id
                    product[0].name = response.data[0].name
                    product[0].units = response.data[0].units
                    product[0].image = response.data[0].product_image[0].image
                    product[0].price = response.data[0].price
                    product[0].quantity = 1
                )
                return Object.assign(product)
             else 
                return this.$store.state.cart
            
        
    ,

这是成功检索数据的生命周期钩子（beforeMount）：

    beforeMount() 
        console.log(this.products)
    

现在的问题是 products 属性被模板视为空。当我没有查询参数进入这个页面时完全没问题，它只是找不到单个产品的计算数据。

我该如何解决这个问题？提前致谢！

【问题讨论】：

return Object.assign(product) 的意义何在？

我想我可以使用它，因为我使用的是 for 循环，所以我不需要两个为单个产品添加额外的代码。

【参考方案1】：

vue/no-async-in-computed-properties

计算的属性和函数应该是同步的。它们内部的异步操作可能无法按预期工作，并可能导致意外行为，这就是您应该避免使用它们的原因。如果您需要异步计算属性，您可能需要考虑使用其他插件 [vue-async-computed]

模板没有获取属性，但生命周期挂钩能够使用计算属性获取数据

您在控制台中看到某些内容的唯一原因是大多数现代浏览器log objects as live data（一旦对象更新，控制台也会更新）。因此，您在控制台中看到的不是对象在执行 console.log 时的值，而是稍后执行的值。您可以通过 console.log(JSON.parse(JSON.stringify(this.products))) 来确认这一点...

要解决问题，请使用watch 而不是computed

data() 
  return 
    products: []
  
,
watch: 
  '$route.query.pid': 
    handler: function(newValue) 
      if(newValue) 
        axios.get(`/api/products/$newValue`).then(response => 
          var product = 
            id: response.data[0].id,
            name: response.data[0].name,
            units: response.data[0].units
            image: response.data[0].product_image[0].image
            price: response.data[0].price
            quantity: 1
          
          this.products = []
          this.products.push(product)
       else this.products = this.$store.state.cart
    ,
    immediate: true
  
,