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

Question

我的 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 个多小时。我非常感谢您的帮助和建议。非常感谢。

Answer 1

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

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

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

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

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

希望对您有所帮助。

Answer 2

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

Actions are similar to mutations, the differences being that:

Instead of mutating the state, actions commit mutations.

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

}

希望对您有所帮助。

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

electron-vue ~ Cannot update vuex state with RxJS subscribe

javascript

vue.js

vuex

electron-vue