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

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

Answer 1

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

动作类似于突变，不同之处在于：

1. 动作不会改变状态，而是提交突变。
2. 操作可以包含任意异步操作。

如文档中所述，突变不是异步的，这一点也很重要。

要记住的一个重要规则是突变处理函数必须 同步。

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

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

}

希望对你有帮助。

Answer 2

根据 vue 的说法，在没有突变的情况下更新状态是一种反模式。

在 Vuex 存储中真正改变状态的唯一方法是提交一个变更

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

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

这就是它应该工作的全部。

希望对你有帮助。