Почему некорректно добавляется товар в корзину?

Question

[bormor]

Осваиваю Vuex.
Задача - добавить из state.products в state.cart продукт по id.
При добавлении продукта с любым id - добавляется первый элемент.
Например id = 3, добавить продукт {title: 'Товар 1', price: 100, id:3}

export default new Vuex.Store({
state:{
    products: [
            {title: 'Товар 1', price: 100, id:1},
            {title: 'Товар 2', price: 200, id:2},
            {title: 'Товар 3', price: 300, id:3},
            {title: 'Товар 4', price: 300, id:4},
    ],
    cartItems:[]
},
mutations:{
    addToCart(state, id){
        const productIndex = state.products.findIndex(item => item.id = id);
        let addedProduct = state.products[productIndex];

        state.cartItems.push(addedProduct);
    }
});

Что может быть причиной? Что может помочь? Что стоит доизучить?

Answer 1

[0xD34F]

findIndex(item => item.id = id)

А-а-а-а-а-а-а-а!!!!!!!

Что стоит доизучить?

Доизучите, чем присваивание отличается от проверки на равенство.

UPD. Почему используется findIndex, не очень понятно - можно через find сразу получить нужный элемент:

addToCart(state, id) {
  state.cartItems.push(state.products.find(n => n.id === id));
},

А если там, откуда вы вызываете мутацию, доступен не только id, но и весь объект - можно передавать в мутацию его, и тогда ничего искать будет не надо:

addToCart: (state, product) => state.cartItems.push(product),

Но вообще, было бы неплохо проверять наличие добавляемого товара в корзине, и вместо дубликатов обновлять счётчик экземпляров, т.е., помещать в корзину не оригинал, а копию объекта с дополнительными данными, например:

addToCart({ cartItems, products }, id) {
  let product = cartItems.find(n => n.id === id);
  if (!product) {
    cartItems.push(product = {
      ...products.find(n => n.id === id),
      quantity: 0,
    });
  }

  product.quantity++;
},

Comments

[bormor]

Блииин. Очепятка. Спасибо :)

А уже рою в сторону реализации реактивности под капотом.