Vuex для каталога с корзиной — как лучше реализовать такое решение?

Question

[bormor]

За основу взял пример каталога из официальной документации (link

У нас есть хранилище с такой структурой (условно)

products: [{}, {}, {}, ...]  // массив объектов с данными товаров
cartItems: [{id:1, quantity: 1}, ...]  // объесты со ссылками на id товара в products и количеством

Данные для корзины мы генерируем в getters на основе массива products

getters: 
  cartProducts: (state, getters, rootState) => {
    return state.items.map(({ id, quantity }) => {
      const product = rootState.products.all.find(product => product.id === id)
      return {
        title: product.title,
        price: product.price,
        quantity
      }
    })
  }
}

Вопрос - как получать данные для корзины товаров, если в state.products у нас хроняться не все товары, а только их часть (загруженная с сервера для текущей страницы пагинации)?

Первые идеи на эту тему:
получать данные для корзины - в actions, через Promise.all по id вытаскивая данные для каждого товара?
но как тогда лучше эти данные хранить и обновлять(например удалив товар или поменяв их количество)?

или лучше уйти от DRY и хранить в cartItems полные данные товаров?

Comments

[alex-1917]

а почему решили, что НЕ ВСЕ товары в products?

[bormor]

товаров может быть много - вроде как быстрее подгружать только те, что нужны для текущей страницы пагинации

плюс если подгружать все - будут сложности в ситуации когда админ добавил/изменил товары, а у посетителя еще старая версия и это надо разруливать

[alex-1917]

bormor, хз. Получать свой массив именно для корзины, не по запросу на товар конечно же, а пачкой сразу... А как еще? Да никак, вот вам и VUE)))
Тут собсно и вылазит эта неприятная особенность работы сугубо на клиенте, т.е. по сути VUE работает не быстро, а слишком быстро)))
Разрабы (по моему мнению) исходили из того, что вот прям ежеминутно меняющихся товаров бывает один магазин на миллион)))
В вашем случае думаю вы занимаетесь ПО (преждевременная оптимизация))). Иначе опишите, что за товары у вас такие, что вот прям раз и поменялось все в течение дня. Сколько магазов за спиной, в половине годами не меняется ассортимент, цена по курсу пересчитывается и все)))
У вас походу товары из китая, да?))) Сочувствую)))

[alex-1917]

alex-1917, или могут посоветовать делать периодическое обновление данных. Такое себе)) Представляю клиента - он понавыбирал товаров, по ценникам посравнивал, уже в шаге от оплаты - тут опля прилетело обновление цен - представляю его круглые глаза, когда на его глазах цены сами пересчитываются, ахахах - куку)))

Answer 1

[0xD34F]

получать данные для корзины - в actions, через Promise.all по id вытаскивая данные для каждого товара?

В смысле - хранить в cartItems только id (ну ещё количество и цену), а при каждом заходе пользователя в корзину подтягивать остальные данные (название/производитель/гарантия/...)? Во-первых, что ещё за Promise.all - собираетесь ради каждого товара выполнять отдельный запрос? Так дела не делаются - передавать на сервер следует массив id, запрос должен быть один. Во-вторых - получится, что у вас есть в хранилище массив id, а в компоненте корзины локально лежат полные данные товаров. На мой взгляд - как-то сложновато, при манипуляции данными cartItems из компонента корзины последний придётся вручную поддерживать в актуальном состоянии - watch на cartItems, отфильтровывание из локального массива удалённых элементов, копирование количества существующих.

Короче, я при добавлении товара в корзину просто полностью бы копировал в cartItems данные из products.

Comments

[bormor]

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

У меня тоже изначальный план был - хранить в cartItems весь объект данных из products. Самое простое и наглядное решение.
Единственный недостаток - ситуации когда админ что-то поменял в товаре (например опечатку в характеристиках), а у пользователя в корзине останется старая версия.

Поэтому сейчас горожу вот такие варианты с подтягиванием данных по id.

[0xD34F]

bormor, так вы вместо получения отдельного набора полных данных обновляйте их - разница-то минимальная. Т.е., пользователь зашёл в корзину - дёрнулся экшен updateCart, в котором из cartItems достаются id, отправляются на сервер, полученный ответ раскладывается по элементам cartItems.

Да, вместо простого присваивания массива тут надо будет вручную обновлять элементы - но как по мне, это проще, чем одновременно работать с двумя разными массивами, которые на самом деле хранят информацию об одних и те же объектах.

Answer 2

[Михаил Бобков]

Если в products нет нужных товаров - подгрузите их.

У вас есть действие которое грузит товары на страницу.
Сделайте действие которое будет подгружать товары по массиву id.

Comments

[bormor]

Да, так и планирую. Делаем Promise.all и загружаем товары по /api/products/ID_ТОВАРА
Это действие мы можем запустить в хуке created()

А как лучше обновлять эти данные после редактирования? Запускать этот action после каждой правки?

[Михаил Бобков]

После редактирования чего?

[bormor]

Например в корзине удалили товар. Или изменили количество товара.

[Михаил Бобков]

Тогда вы удаляете/изменяете товар в корзине (cartItems).
Ничего подгружать не надо.

Если вы сохраняете состоянии корзины на сервере, тогда при каждом изменении нужно отсылать запрос с изменениями на сервер.

[bormor]

Да, мы как раз планируем сохранять данные корзины на сервере.

Т.е. мы после каждой правки должны запускать action, который запросит с сервера новые данные для cartItems и данные для используемых в cartItems продуктов?

[Михаил Бобков]

Зачем? Данные о добавляемых товара уже должны быть у вас на странице.
При изменении в корзине вы отправляете на сервер только изменения в корзине.

[alex-1917]

bormor, причем тогда VUE?)