0

我的突变中有两个功能和两个状态

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

4

2 回答 2

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

}

我希望它有所帮助。

于 2018-07-14T04:13:34.947 回答
0

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

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

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

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

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

我希望它有所帮助。

于 2018-07-13T10:45:07.557 回答