Как обойти эту магию?

Question

[AspMaster]

Написал такой вот кода в мутации vuex:

ADD_TO_CART: function(state, payload) {
    let found = state.cartItems.find(i => i.id == payload.id);
    if (found){
        found.count = count + payload.count;
    }
     else {
        state.cartItems.push(payload);
    }
    window.localStorage.setItem('cart', JSON.stringify(state.cartItems));
  }

Получаю такую магию: когда в корзине уже есть товар, а надо добавить его количество, то у found.count = payload.count. То есть если до вызова этой функции у found был count = 1, потом вызвать эту функцию с payload.count = 5, то как только начинается функция found.count = 5, а после выполнения строчка found.count += payload.count мы получим found.count = 10. Как это вообще получается ?

Пример(немного изменил код, но результат тот же):

//state.cartItems[index].count = 1, payload.count = 5 (под index подразумевается индекс объекта, который будем менять)
ADD_TO_CART: (state, payload) =>{
    //уже тут state.cartItems[index].count = 5, payload.count = 5 (а вот почему - хз)
    let index = state.cartItems.findIndex(i => i.id == payload.id);
    if (index > -1){
        state.cartItems[index].count += payload.count;
         //state.cartItems[index].count = 10, payload.count = 5
    }
     else {
        state.cartItems.push(payload);
    }
    window.localStorage.setItem('cart', JSON.stringify(state.cartItems));
  }

Answer 1

[Алексей]

Я не совсем понял почему у тебя ошибку не выплевывает count is not defined

apples = 5;
basket = 0;

basket = apples; // тупо присваем в корзину яблоки
basket += apples; // прибавляем яблок к тем, что уже есть корзине
basket = basket + apples; // тоже самое что и выше

Да и я логику не совсем понял. Ты в, грубо говоря, общем стейте находишь товар и изменяешь ему каунт, есстественно в следующий раз у тебя этот каунт будет увеличен, потому что ты его в стейте поменял.

Comments

[AspMaster]

Это я все понимаю, дело в другом.
Получается, что до выполнения функции у нас в state айтем, который я собираюсь изменять, равен, например, X. Как только начинает выполняться эта функция с payload.count=Y, то found.count тоже становится Y (хоть и присваивания не происходило).

[Алексей]

AspMaster,

state.cartItems.find(i => i.id == payload.id); // возвращает ссылку на объект в стейте, допустим ИД у тебя 123
// это значит эта строчка будет тоже самое
found.count = payload.count;
// что и 
state.cartItems['123'].count = payload.count;

[AspMaster]

Алексей, это тоже все понятно. редактировал шапку вопроса, может теперь будет понятнее

[Алексей]

AspMaster, дак тебе прибавить надо каунт или заменить ? Если у тебя изначально state.cartItems[index].count = 1, значит у тебя и по дефолту корзина уже не пустая, либо он из локал стораджа прошлые твои тесты подгружает

[Алексей]

AspMaster, Не знаю что тебя удивляет в твоем же коде, давай по шагам исходя из того, что ты написал в вопросе:
1. Изначально у тебя каунт = 1
2. Ты вызываешь функцию, которая заменяет этот каунт пейлоадом 1 = 5, на этом этапе у тебя каунт, очевидно, будет 5
3. Ты вызываешь еще раз функцкию с пейлоадом 5, но теперь используешь прибавление, а не замену 5 += 5, ясно дело будет 10.

[AspMaster]

Алексей, так оно не заменяет, а прибавляет