Question

我创建了一个购物车系统，我的home组件可以在其中添加元素到我的购物车组件中，所有这些都保留在我的商店中。我想在我的vuex商店中计算购物车中所有产品的总数，并在购物车组件中显示值。当我尝试这样做时，我会得到NaN。我的代码如下。我将如何解决这个问题？

这是在我的购物车组件中，其中cartdata是数组，所有购物车组件都存储在vuex商店中

total: function(){
        let tot = 0;
        this.$store.state.cartdata.forEach(product => tot += 
        this.$store.state.products.price);
        return tot;
      }

这就是我在vue组件中显示总数的方式。

Checkout ( Total: {{total}} )

Answer 1

我认为最好的方法是使用computed property来计算总数，这样该组件就不会多次重新计算总数，或者可以使用相同的逻辑来创建Vuex getter

computed: {
  total () {
    this.$store.state.cartdata.reduce((result, product) => {
      // We need to ensure that the property is of the type Number.
      result += Number(product.price);
      return result;
    }, 0);
  },
},

请注意，属性product.price可能是错误的，因为未提供数据结构。

如何从vuex商店获取总计以显示在vue组件上？

1 个答案: