How to synchronize store and back-end?

Question

Vue.js

I am making a bitrix cart on vuejs using vuex.
The question is at what point is it better to send ajax requests when changing the quantity of goods in the cart?
With each click on the "+" of the product, I don’t feel like it at all, because they can actively click on it ...
Purpose: the user went to the basket, increased / decreased the number of goods, deleted something. Reloaded the page. All information must remain. That is, its actions must be processed on the server.
Suggest options.
How good are the options:
1. Synchronize the basket state at intervals.
2. Synchronize the state on the onunload event.
3. Write a click handler that will regulate the frequency of requests (I really don’t want to).

Answer 1

Do I understand the goals correctly?

1. Limit the frequency of calls to the backend - no more than N in M ​​seconds
   The first point is solved by taking into account the time of the last N calls.
   The second is the flag "everything is saved on the backend" - which is set when the cart is changed and is removed after successful synchronization. With the flag raised, do not let it be so easy to leave the page through onBeforeUnload

Answer 2

How good are the options:
1. Synchronize the bucket state at intervals.
2. Synchronize the state on the onunload event
3. Write a click handler that will regulate the frequency of requests (I really don’t want to)

All of these options have a common drawback. Suppose the user's cat suddenly decided to play with the computer's power cable and pulled it out. Well, somehow it happened. Or the user dropped the phone, the cover flew off when it fell, the battery fell out. Or something else in the same vein. In short, everything was cut off. And before that, the user just added the item to the cart / changed the quantity / removed the item from the cart. And no sync.
It is necessary to somehow immediately save the state of the basket, after any user action, immediately. Write it to localstorage. There are plugins for vuex for this business - for example . Synchronize when downloading the app.
How to synchronize in the process of work - I would prefer the third option. Only, of course, it is not the clicks that need to be processed, but the state of the basket in the storage. You make a watch, in the handler - a request for synchronization with the server, wrapped in debounce (too lazy to write - you can easily google the finished version).
That is, there will be something like

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