[Vuejs]-Vuejs ajax call order: can I create new list item in vuex before ajax?

by

1👍

Your first approach is the default (and for me the right one), go to the server and return (if it was successfully save) the id, add it to the task object and update the store.

Your second approach it’s not appropriated (also for me), what if the save fails? you already have the task on the store and updated the UI, and then the task should be removed or implement some retry request method, to maintain the task in the UI. It will be harder to test and debug, and also harder to understand if you are note familiar with the code.

👤DobleL

1👍

Button->Update Vuex->Ajax/Vue is possible, hence the reason we have Actions to perform an async operation.

That said, you can always chain actions , if the first one returns a promise say it triggers a db save, waits for it to save successfully gets back the id and then trigger a subsequent action, if it fails you may want to handle it with retries and or whatever is appropriate, something along the lines of,

actions: {
 saveInDb ({ commit }) {
   return new Promise((resolve, reject) => {
    // set time out below is your call to save into your Db
    setTimeout(() => {
    // save in db
      resolve(yourId)
    }, 1000)
  })
},
updateEverythingElse ({ dispatch, commit }) {
 return dispatch('SaveInDb').then((myNewId) => {
  commit('mutationToSaveId')
 }).catch((e) => {})
 }
}

I may not have captured everything you said completely, but just gave a brief idea how it can possibly be done from the little i have done.

Based on the edited question

This is the reason guids exist, and hence frontend/client sends in the Id, that said, looks like it might be an identity column for Id from your question, so there is then lesser options, of which you mentioned one with vuexid , the other would be combinations of the column values like a composite key could be as simple ${title}_${you_other_column}, other than this you are probably left with option 1 of your doing.

Food for thought

Along those lines, my guess is, you are doing a batch update of Array<Tasks>, if am not mistaken, so i don’t see the reason for your Vuex’s mutations to be per row (per task object) and that it needs to be the entire collection , you may need to rethink that portion of it as i dont know the context and the reasoning behind updating one row at a time.

👤Jaya

Leave a comment