vue 3 + vuex cart Cannot read properties of undefined (reading 'qty')(product quantity in the cart needed to be updated) - vue.js

Question

so I get the error: "Cannot read properties of undefined (reading 'qty')" because I try to add the same product in the cart so it's quantity(and price) will update in the cart.
when I do it from shop.vue it works and update the total price, but in the cart the same button does not work and showing me the error above.
how can I make it work? what is missing? thanks.
the code:
shop.vue
<template>
Cart Items: <cart-badge :count="cartLength">{{ count }}</cart-badge>
<div class="shop">
<div class="products" v-for="Product in products" :key="Product.id">
<h1>{{ Product.name }}</h1> <img :src="Product.pic" width="400" /> <br>
{{ Product.description }} <br>
{{ "$" + Product.price }} <br>
<button class="addToCart" #click="addToCart(Product)">Add to Cart</button>
</div>
</div>
</template>
<script>
import CartBadge from '../components/CartBadge.vue';
import { mapMutations, mapState } from 'vuex';
export default {
name: 'shop',
methods: {
...mapMutations([
'addToCart',
])
},
components: {
'cart-badge': CartBadge
},
computed: {
cartLength() {
return this.$store.state.cart.length;
},
products() {
return this.$store.state.Product;
},
...mapState([
"cart"
]),
},
}
</script>
db.json
[
{
"id": 1,
"name": "iphone 11",
"pic": "/pics/iphone11.jpg",
"description": "newest iphone!",
"price": 999,
"qty": 10
},
{
"id": 2,
"name": "galaxy s22",
"pic": "/pics/galaxy22.jpg",
"description": "a new phone from samsung!",
"price": 1200,
"qty": 10
}
]
store.js
import { createStore } from "vuex";
import Product from "../db.json";
export default createStore({
state: {
cart: [],
Product,
},
getters: {
cart: (state) => state.cart,
cartSum: (state) => {
return state.cart.reduce((total, Product) => {
return (total += Product.price * Product.qty);
}, 0);
},
},
mutations: {
addToCart: (state, item) => {
let product = state.Product.find((product) => product.id === item.id);
let cartProduct = state.cart.find((product) => product.id === item.id);
if (cartProduct) {
cartProduct.qty++;
} else {
state.cart.push({
...product,
stock: product.qty,
qty: 1,
});
}
product.qty--;
},
},
actions: {
addToCart(context, payload) {
context.commit("addToCart", payload);
},
},
modules: {},
});
cart.vue
<template>
<h1>Cart</h1>
<div class="cartItems">
Cart Items: <cart-badge :count="cartLength">{{ count }}</cart-badge>
<p v-if="!cart.length">Your cart is empty! please add something to the cart</p>
<div class="products" v-for="Product in cart" :key="Product.id">name: {{ Product.name }} price: {{ Product.price
}}</div>
<button v-if="cart.length" class="removeFromCart" #click="removeFromCart(Product)">X</button>
<button v-if="cart.length" class="increment" #click="addToCart()">+</button>
<button v-if="cart.length" class="decrement" #click="removeFromCart()">-</button>
<strong v-if="cart.length">Total ${{ cartSum }}</strong>
</div>
</template>
<script>
import CartBadge from '../components/CartBadge.vue';
import { mapGetters, mapState } from 'vuex';
import Product from "../db.json"
export default {
name: 'Cart',
components: {
'cart-badge': CartBadge
},
computed: {
cartLength() {
return this.$store.state.cart.length;
},
products() {
return this.$store.state.Product;
},
...mapGetters([
"cartSum"
]),
...mapState([
"cart"
]),
},
methods: {
removeFromCart(Product) {
this.$store.state.cart.splice(Product)
console.log(this.$store.state.cart)
},
addToCart() {
this.$store.dispatch("addToCart", this.products);
}
}
}
</script>
update: I have tried this: addToCart(product) { this.$store.dispatch("addToCart", product); }
but now I'm getting Uncaught TypeError: Cannot read properties of undefined (reading 'id') what am I missing?

Answer 1

In shop.vue you call addToCart mutation with only one product (#click="addToCart(Product)") but in cart.vue you call addToCart with an array of product (this.$store.dispatch("addToCart", this.products))