electron-vue ~ 无法使用 RxJS 订阅更新 vuex 状态

electron-vue ~ Cannot update vuex state with RxJS subscribe

我的 mutations 和两个 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用于设置files状态和UPLOAD_IMAGE用于触发上传图片到服务器。上传过程 运行 和上传进度 return。我的 uploadImage() return 一个 Observable,我想在收到进度时更新 uploadProgress 状态,但我不能这样做。控制台一直报错,如下图:

我不知道如何处理这个错误。我已经为此花费了 4 个多小时。 我非常感谢您的帮助和建议。非常感谢。

根据 vue,更新状态而不改变是一种反模式。

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

这就是您收到此警告的原因。

尝试写一个突变,而不是写 state.uploadProgress += progress 写一个类似于 SET_UPLOAD_IMAGE 的突变。

这就是它应该起作用的全部。

希望对您有所帮助。

您需要对所有异步任务使用操作。文档就是这么说的

Actions are similar to mutations, the differences being that:

  1. Instead of mutating the state, actions commit mutations.
  2. Actions cancontain arbitrary asynchronous operations.

同样重要的是,突变不是异步的,如文档中所述。

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

你可以编写一个动作并根据需要提交你的进度

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
  },

}

希望对您有所帮助。