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

Despite being installed, the message 'concurrently: command not found' pops up

The total height of an HTML element, which takes into account the margin of the element itself

Is it possible for the upload form submission to wait until the file processing is finished?

Having trouble with Window.open on Mobile Devices and Canvas?

Computed properties are not being updated based on changes in the length of the Vuex state object

Spying on functions within Vue 3 setup() is not allowed

JavaScript - Removing Content from an Element

Accessing the Angular scope and making modifications using Chrome browser

How can Angular be used for live search to provide precise search results even when the server does not return data in the expected sequence?

What are the appropriate scenarios to utilize the declare keyword in TypeScript?

The cart total variable in Vuejs is coming back as NaN

"Exploring the possibilities of RSelenium and Javascript together

Transforming the breakpoint can cause fluctuations in the jQuery UI selectable selected event

How to employ Math.random with multiple variables in JavaScript

Converting HTML Javascript to JAVA with the help of Selenium

Leverage the `dispatch` hook within a useEffect function

Exploring Selenium: Clicking on Auto-Complete Suggestions using Python

Displaying the information from a nested array of objects in an HTML table through iteration

Having trouble initializing an array of objects to store data in MongoDB using AngularJS

What could be causing my for loop to not function properly within the ngOnInit lifecycle hook?