Почему выдает ошибку [Vue warn]: Error in v-on handler: «TypeError: null is not an object (evaluating 'state.cart[item.id]')»?

Question

[Vova135798]

Почему при добавлении товара в корзину мне выдает ошибку

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

Answer 1

[Николай]

Добрый день, у вас тернарное условие, которое проверяет если что-то есть в хранилище, то он его распарсит, если его нет, то у вас будет пустой объект, к которому вы путаетесь получить доступ
Ошибка не в стейте, а в компоненте, поставьте условие, что если у вас cart пустой, то не выводите компонент,
Лучше конечно изначально его объявить как null и сделать отдельно экшн, который будет заполнять вам ваш стейт

Comments

[Vova135798]

Я не очень понимаю ваше решение. Объясните, пожалуйста, поподробнее

[Vova135798]

Если корзина пустая, то я ничего не могу в нее добавить, мне выдает эту ошибку. Но если в корзине что-то есть, то товар добавляется

[Николай]

let cartItem = state.cart[item.id];
Ну смотрите, у вас эта строчка что делает ? она пытается обратиться к ключу в cart, а у вас он может быть пустым объектом { } , поэтому и падает с ошибкой, вы проверьте, существуют ли вообще ключи в объекте, а потом выполняйте условия, ну либо что-то на подобии :
let cartItem = state.cart?[item.id];