Почему выдает ошибку TypeError: null is not an object?
Почему при добавлении товара в корзину выдает ошибку [Vue warn]: Error in v-on handler: "TypeError: null is not an object (evaluating 'state.cart[item.id]')"?
import Vue from "vue";
import Vuex from "vuex";
let cart = window.localStorage.getItem('cart');
let cartCount = window.localStorage.getItem('cartCount');
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
cart: cart ? JSON.parse(cart) : {},
cartCount: cartCount ? parseInt(cartCount): 0,
},
mutations: {
addToCart(state, item) {
let cartItem = state.cart[item.id];
if(state.cart[item.id]){
cartItem.quantity++
cartItem.totalPrice = cartItem.quantity * cartItem.price;
}
else{
state.cart[item.id] = item;
Vue.set(item, 'quantity', 1);
Vue.set(item, 'totalPrice', item.price);
}
state.cartCount++;
this.commit('saveCart');
},
saveCart(state){
window.localStorage.setItem('cart', JSON.stringify(state.cart));
window.localStorage.setItem('cartCount', state.cartCount);
},
},
})
<template>
<div class="product">
<div class="product-content">
<span class="product-title">
<router-link :to="/product/ + id">{{
title
}}</router-link>
</span>
<div class="product-bottom">
<div class="product-price">
{{ price }}
</div>
<div class="product-button">
<button v-on:click="addToCart()">
добавить в корзину
</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
id: {
type: Number,
default: "NULL",
},
title: {
type: String,
default: "NULL",
},
price: {
type: String,
default: "NULL",
},
object: {
type: Object,
default: 'NULL'
}
},
methods: {
addToCart(){
this.$store.commit('addToCart', this.object);
},
}
}
</script>