@id141365154
Веб разработчик

Как синхронизировать store и back-end?

Делаю корзину для битрикса на vuejs с использованием vuex.
Вопрос в какой момент лучше отправлять ajax запросы при изменении количества товара в корзине?
При каждом клике на "+" у товара, совсем не хочется, т.к по нему могут активно кликать...

Цель: пользователь зашел в корзину, увеличил\уменьшил кол-во товара, что то удалил. Перезагрузил страницу. Вся инфа должна остаться. Т.е его действия нужно обработать на сервере.
Предложите варианты.

Насколько хороши варианты:
1. интервалом синхронизировать стейт корзины.
2. Синхронизировать стейт при событии onunload.
3. Писать обработчик кликов, который будет регулировать частоту запросов (очень не хочется).
  • Вопрос задан
  • 446 просмотров
Решения вопроса 1
Цели правильно понимаю?
  1. Ограничить частоту обращений к backend - не более N в M секунд
  2. Не потерять набранную корзину

Первый пункт решается учетом времени последних N обращений.
Второй - флагом "всё сохранено на бэкенде" – который ставится при изменении корзины и снимается после успешной синхронизации. При поднятом флаге не давайть так просто уходить со страницы через onBeforeUnload
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега Vue.js
Насколько хороши варианты:
1. интервалом синхронить стейт корзины.
2. Синхронить стейт при событии onunload
3. Писать обработчик кликов, который будет регулировать частоту запросов (очень не хочется)

У всех этих вариантов есть общий недостаток. Предположим, кот пользователя внезапно решил поиграть с кабелем питания компьютера и выдернул его. Ну, как-то так получилось. Или пользователь телефон выронил, при падении слетела крышка, аккумулятор вывалился. Или ещё что-то в том же духе. Короче, отрубилось всё. А перед этим пользователь как раз добавил товар в корзину / изменил количество / удалил товар из корзины. И никакой синхронизации.

Надо как-то сразу сохранять состояние корзины, после любого действия пользователя, немедленно. Пишите его в localstorage. Под это дело есть плагины для vuex - например. При загрузке приложения синхронизируйте.

Как синхронизировать в процессе работы - я бы предпочёл третий вариант. Только конечно не клики надо обрабатывать, а состояние корзины в хранилище. Делаете watch, в обработчике - запрос на синхронизацию с сервером, обёрнутый в debounce (лень писать - можете легко нагуглить готовый вариант).

Т.е., будет что-то вроде

methods: {
  syncCart: debounce(function() {
    ...
  }),
},
watch: {
  '$store.state.cart': {
    immediate: true,
    deep: true,
    handler: 'syncCart',
  },
},
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы