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

Question

[Виктор Кулябин]

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

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

Насколько хороши варианты:
1. интервалом синхронизировать стейт корзины.
2. Синхронизировать стейт при событии onunload.
3. Писать обработчик кликов, который будет регулировать частоту запросов (очень не хочется).

Comments

[Сергей delphinpro]

Храните корзину в localStorage — она не потеряется.
Синхронизируйте стейт по каждому изменению с небольшим дебаунсом, 0,5-1с. Не страшно, бэкэнд не упадет.

Answer 1

[Сергей Соколов]

Цели правильно понимаю?

1. Ограничить частоту обращений к backend - не более N в M секунд
   
2. Не потерять набранную корзину
   

Первый пункт решается учетом времени последних N обращений.
Второй - флагом "всё сохранено на бэкенде" – который ставится при изменении корзины и снимается после успешной синхронизации. При поднятом флаге не давайть так просто уходить со страницы через onBeforeUnload

Comments

[Виктор Кулябин]

Спасибо за дебоунс

Answer 2

[0xD34F]

Насколько хороши варианты:
1. интервалом синхронить стейт корзины.
2. Синхронить стейт при событии onunload
3. Писать обработчик кликов, который будет регулировать частоту запросов (очень не хочется)

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

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

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

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

methods: {
  syncCart: debounce(function() {
    ...
  }),
},
watch: {
  '$store.state.cart': {
    immediate: true,
    deep: true,
    handler: 'syncCart',
  },
},