Issue with electron-vue: Unable to modify Vuex state when using RxJS subscribe

Question

Issue with electron-vue: Unable to modify Vuex state when using RxJS subscribe

I need help with my code involving two functions in the mutations and two pieces of 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 function is used to update the files state, while UPLOAD_IMAGE triggers the image uploading process to the server. The issue I'm facing involves updating the uploadProgress state based on the progress received during the upload process using an Observable from uploadImage(). However, I keep encountering errors as shown in the image below:

https://i.stack.imgur.com/Zp90a.png

I've spent over 4 hours trying to resolve this error without success. Any help or suggestions would be greatly appreciated. Thank you.

javascript vue.js vuex electron-vue

Answer 1

Answer №1

In order to handle asynchronous tasks, it is recommended to use actions as specified in the documentation.

Actions serve a similar purpose to mutations but with key differences:

Instead of directly changing the state, actions trigger mutations.

Actions can include asynchronous operations.

It is crucial to note that mutations should not be used for async tasks, according to the provided guidelines.

An important guideline states that mutation handler functions must be synchronous.

Therefore, you can define an action to handle your progress updates accordingly

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) => {
    //this action is no longer necessary
  },

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

}

I hope this explanation proves helpful.

Answer 2

In order to handle asynchronous tasks, it is recommended to use actions as specified in the documentation.

Actions serve a similar purpose to mutations but with key differences:

Instead of directly changing the state, actions trigger mutations.

Actions can include asynchronous operations.

It is crucial to note that mutations should not be used for async tasks, according to the provided guidelines.

An important guideline states that mutation handler functions must be synchronous.

Therefore, you can define an action to handle your progress updates accordingly

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) => {
    //this action is no longer necessary
  },

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

}

I hope this explanation proves helpful.

Answer 3

Answer №2

In the world of Vue, modifying state without mutation is frowned upon.

The only legitimate way to make changes to state in a Vuex store is through committing a mutation.

This warning message is being triggered for that reason.

To resolve this issue, consider creating a mutation; instead of directly updating with state.uploadProgress += progress, use something like SET_UPLOAD_IMAGE.

Just follow these steps and everything should function correctly.

I trust this guidance will be beneficial to you.

Answer 4

In the world of Vue, modifying state without mutation is frowned upon.

The only legitimate way to make changes to state in a Vuex store is through committing a mutation.

This warning message is being triggered for that reason.

To resolve this issue, consider creating a mutation; instead of directly updating with state.uploadProgress += progress, use something like SET_UPLOAD_IMAGE.

Just follow these steps and everything should function correctly.

I trust this guidance will be beneficial to you.

Issue with electron-vue: Unable to modify Vuex state when using RxJS subscribe

Answer №1

Answer №2

Similar questions

What is the best way to incorporate external scripts into a Node.js project?

``There seems to be an issue with the functionality of JSON.stringify

What is the best way to isolate a single element within a for loop and exclude all others?

Solving the Issue of Assigning a Random Background Color to a Dynamically Created Button from a Selection of Colors

The functionality of Angular.js route seems to be malfunctioning

The standard date format used in Javascript/Jquery programs

The percentage height setting for a div is not functioning properly, but setting the height in pixels or viewport

Sockets causing a blockage in the Express server

Transitioning to Meteor and React or Immigrating to Meteor

Reopen a Kendo UI dialog

I'm having trouble with my Laravel edit page not functioning properly when using vue.js. Can anyone help me troubleshoot

Tips for retaining input field content within a BootstrapVue table

Achieve the central element while scrolling on the window

When you click, apply the hidden class to all the div elements

What is the best way to ensure email address validation is done perfectly every time?

Delaying the return statement

Problem with ng-include in ng-view templates

steps for using the push method to create a new array in JavaScript

When using $http in AngularJS, an error may occur when it

What is the best way to retrieve the value of a dynamically created button in code?