electron-vue ~ 无法使用 RxJS 订阅更新 vuex 状态
electron-vue ~ Cannot update vuex state with RxJS subscribe
我的 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 个多小时。
我非常感谢您的帮助和建议。非常感谢。
根据 vue,更新状态而不改变是一种反模式。
The only way to actually change state in a Vuex store is by committing a mutation
这就是您收到此警告的原因。
尝试写一个突变,而不是写 state.uploadProgress += progress
写一个类似于 SET_UPLOAD_IMAGE
的突变。
这就是它应该起作用的全部。
希望对您有所帮助。
您需要对所有异步任务使用操作。文档就是这么说的
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
},
}
希望对您有所帮助。
我的 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 个多小时。 我非常感谢您的帮助和建议。非常感谢。
根据 vue,更新状态而不改变是一种反模式。
The only way to actually change state in a Vuex store is by committing a mutation
这就是您收到此警告的原因。
尝试写一个突变,而不是写 state.uploadProgress += progress
写一个类似于 SET_UPLOAD_IMAGE
的突变。
这就是它应该起作用的全部。
希望对您有所帮助。
您需要对所有异步任务使用操作。文档就是这么说的
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
},
}
希望对您有所帮助。