electron-vue ~ Cannot update vuex state with RxJS subscribe

Question

I have two functions in my mutations and two state

const state = {
  files: [],
  uploadProgress: 0
}

const mutations = {

  SET_UPLOAD_IMAGE: (state, files) => {
    state.files = files
  },

  UPLOAD_IMAGE: (state) => {
    StandbyService.uploadImage(state.files).subscribe(progress => {
      state.uploadProgress += progress
      console.log(`Upload Progress ${progress}%`)
    })
  }

}

SET_UPLOAD_IMAGE is used to set the files state and UPLOAD_IMAGE is used to trigger uploading the image to the server. The upload process run and return the upload progress. My uploadImage() return an Observable and I want to update the uploadProgress state whenever the progress is received, but I can't do such that. It keep on giving error in the console as shown in the picture below:

I don't know what to do with this error. I already spent more than 4 hours with this. I really appreciate for helps and suggestions. Thank you very much.

@MazinoSUkah No It's not working till now – Ken Phanith Jul 14 '18 at 03:37 — Ken Phanith, Jul 14 '18 at 03:37

score 1 · Accepted Answer · answered Jul 14 '18 at 04:13

You need to use actions for all async task. That's what documentations says

Actions are similar to mutations, the differences being that:

Instead of mutating the state, actions commit mutations.

Actions cancontain arbitrary asynchronous operations.

Also it's important that mutations are not async, as mentioned in the docs.

One important rule to remember is that mutation handler functions must be synchronous.

So well you can write an action and commit your progress as needed

const state = {
  files: [],
  uploadProgress: 0
}
const action:{
  uploadImage({commit,state}, payload){
   StandbyService.uploadImage(state.files).subscribe(progress => {
      commit('updateProgress', progress)
      console.log(`Upload Progress ${progress}%`)
    })
  })
  }
}
const mutations = {

  SET_UPLOAD_IMAGE: (state, files) => {
    state.files = files
  },

  UPLOAD_IMAGE: (state) => {
    //you don't need it anymore
  },

  UPDATE_PROGRESS: (state, progress){
    state.uploadProgress += progress
  },

}

I hope it helps.

score 0 · Answer 2 · answered Jul 13 '18 at 10:45

0

According to vue, updating the state without mutation is an antipattern.

The only way to actually change state in a Vuex store is by committing a mutation

That is why you are getting this warning.

Try writing a mutation, instead of writing state.uploadProgress += progress write a mutation similar to SET_UPLOAD_IMAGE.

That's all it should work.

I hope it helps.

answered Jul 13 '18 at 10:45

Ankit Kumar Ojha

2,296
2
22
30

Ahh I see! But how can I commit a mutation inside a mutation function? If possible, Can you give me some sample? Thank you! – Ken Phanith Jul 14 '18 at 03:40
As I checked with this [https://stackoverflow.com/questions/40487627/can-i-call-commit-from-one-of-mutations-in-vuex-store/42839744](https://stackoverflow.com/questions/40487627/can-i-call-commit-from-one-of-mutations-in-vuex-store/42839744) they mentioned that `commit` is `undefined` – Ken Phanith Jul 14 '18 at 03:43
you can do a work around, by dispatching one action and inside that action you commit both of your mutations. – Ankit Kumar Ojha Jul 14 '18 at 04:00

electron-vue ~ Cannot update vuex state with RxJS subscribe

2 Answers2