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

Question

I creating a cart system whereby my home component can add elements to my cart component and all this is persisted in my store. I would like to calculate the total of all products in cart, in my vuex store and present the value in the cart component. When i try doing this i get NaN. My code is below. How would i go about solving this?

this is within my cart component whereby cartdata is the array in which all the cart components are stored within the vuex store

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

This is how i present the total in the vue component.

Checkout ( Total: {{total}} )

Answer 1

I believe that the best would be to calculate the total either with a computed property , so the component won't recalculate the total too many times, or a Vuex getter could be created using the same logic.

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);
  },
},

Please note that the property product.price might be wrong, as the data structure wasn't provided.