How to calculate total price of basket Vuejs Vuex

Question

I have a store in which there is an array named basketContents

Like this:

state: {
basketContents: [
{
     name: .....
     quantity: 2
     price:1000
},
{
     name: .....
     quantity: 6
     price:120
},
.........
   ]
}

From this I want to calculate the total price of the whole basket and display it in a component is there an easy way to do so? The total price should also change whenever I change an items quantity. I am new to this.

Answer 1

 getters: {
    total: state => {
      return state.basketContents.reduce((acc, val) => acc + val.quantity * val.price, 0) 
    }
 }

In your getters you can add that.

In your .vue file put:

import { mapGetters } from 'vuex';
// And put in computed:
// mix the getters into computed with object spread operator
...mapGetters([
   'total'
])