In my Vuex store, I have two getters that calculate the itemCount and totalPrice like this:
getters: {
itemCount: state => state.lines.reduce((total,line)=> total + line.quantity,0),
totalPrice: state => state.lines.reduce((total,line) => total +
(line.quantity*line.product.price),0)
},
These getter values are displayed in a component as follows:
<template>
<div class="float-right">
<small>
Your cart:
<span v-if="itemCount > 0">
{{ itemCount}} item(s) {{ totalPrice | currency}}
</span>
<span v-else>
(empty)
</span>
</small>
<b-button variant="dark"
to="/cart"
size="sm"
class="text-white"
v-bind:disabled="itemCount === 0">
<i class="fa fa-shopping-cart"></i>
</b-button>
</div>
</template>
<script>
import {mapGetters} from "vuex";
export default {
name: "cart-summary",
computed: {
...mapGetters({
itemCount: "cart/itemCount",
totalPrice: "cart/totalPrice"
})
}
}
</script>
<style scoped>
</style>
While the second getter (totalPrice) functions correctly by displaying the total price in the cart, the first one (itemCount) shows strange results. For example:
If my cart has 3 items of product A, the total will display as 03. If my cart has 3 items of product A and 2 of B, the total will display as 032.