Как организовать корзину товаров на VueJS, Vuex?

Question

[Нурсеит Шарип]

Никак не могу организовать корзину товаров.

Есть вот такая верстка.
Есть массив товаров:

<script>
        const product = (NameProduct, PriceProduct, DescProdusct, img) => ({NameProduct, PriceProduct, DescProdusct, img})
        const products = [
      product('name1', '130', 'desc1', 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/FD_1.jpg/267px-FD_1.jpg'),
      product('name2', '130', 'desc2', 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/FD_1.jpg/267px-FD_1.jpg'),
      product('name3', '130', 'desc3', 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/FD_1.jpg/267px-FD_1.jpg'),
      product('name4', '130', 'desc4', 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/FD_1.jpg/267px-FD_1.jpg')
    ];

export default {
      data: () => ({
      products: products
})
    </script>

По клику:

<v-btn 
                        flat
                        small 
                        class="black--text"
                        @click="add"
                      >
                        В корзину
                      </v-btn>

надо передать товары допустим на массив cards[] товар, при клике на add второй раз умножить лишь количества а не дать новому card новый индекс. Посоветовали сделать c Vuex, чтобы товары хранились при обновлении страницы.
Подскажите пожалуйста, как можно это сделать с помощью Vuex?

Answer 1

[Андрей Седышев]

Удивительно, но в официальном репозитории есть пример прям про это.
А ещё есть курс для начнинающих на основе этого примера.
И всё про корзину продуктов! Радость, счастье!

Comments

[Нурсеит Шарип]

спасибо за ответ

Answer 2

[Виктор Л]

Вот можете поковырять код и натянуть свой дизайн

Песочница

Comments

[Нурсеит Шарип]

спасибо за ответ

Answer 3

[Дмитрий]

Массив товаров, при нажатии кнопки "в корзину" добавляете плюс один к реквизиту orderedCount - заказанное количество...В левую колонку выводите только товары, у которых orderedCount > 0, в правую - все.

Comments

[Нурсеит Шарип]

спасибо за ответ