javascript - electro-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 状态，但我不能这样做。控制台一直报错，如下图所示:

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

Answer 1

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

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

}

希望对您有所帮助。