electronic-vue〜无法使用RxJS订阅更新vuex状态

Question

我的变异有两个功能，还有两个状态

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 状态，但是我不能这样做。如下图所示，它继续在控制台中显示错误：

我不知道该怎么办。我已经花了四个多小时。 我非常感谢您的帮助和建议。非常感谢。

Answer 1

根据vue，无突变地更新状态是一种反模式。

  

在Vuex商店中实际更改状态的唯一方法是提交突变

这就是为什么您收到此警告。

尝试编写一个变异，而不要写state.uploadProgress += progress来写一个类似于SET_UPLOAD_IMAGE的变异。

这就是应该的全部工作。

希望对您有帮助。

Answer 2

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

  

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

     

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

}

希望对您有帮助。