CODEWITHSUNDEEP
javascriptvue.jsvuex
Daniel Klimek
Daniel Klimek

Reputation: 144

Vuex store same as Database in real time

sorry if this is a duplicate but couldn't find any opinions on this. Let's say I've an app with lots of forms split on different sections with every section having 2-3 questions. Every form does CRUD actions to my backend models.

For better understanding there are forms in which I need to fill in my sources of income, there are forms where I need to specify properties I own, etc.

According to these data my app do calculations etc. so I need to have a vuex store to distribute these data accross different components.

The problem is that I want to make the app and forms as fast as possible without any waiting for backend reponse, but I also want to send data after every section of form and I want to make sure that backend saved that data without any issue.

My question is - is it a good idea to set up actions like this:

async setIncome(context, payload) {
  const from = context.getters.getIncome;
  
  //merge payload into current state
  payload = Object.assign(from, payload);
  
  context.commit("setIncome", payload);
  
  try {
    await axios.patch(..., payload);
  } catch (e) {
    context.commit("setIncome", from);
    ...
  }
}

Also I would update whole store every x seconds according to database if some changes happens there

In theory this way I can keep my Vuex up to date with database and don't need to show loading screens when waiting for GET responses.

What do you think about this ?

Upvotes: 0

Views: 175

Answers (1)

ghazyy
ghazyy

Reputation: 749

  1. do not make API call in your VUEX ! your piece of code should do just one job and that is keeping the true data around your app.
  2. I highly suggest separate your code (eg in plugin section in Nuxtjs) and update your store through actions in determined cycle.

Upvotes: 1

Related Questions