我正在尝试在我的vuex存储中的“ updateInformation”突变中对数组vue.set（）进行设置。
这是我脚本中的函数：
updateImagesArrayInMutation(imageFile) {
let images = [];
this.images.forEach(imageFile => {
imageFile.generateBlob(
blob => {
let rand = (Math.random().toString(36).substring(2, 16) + Math.random().toString(36).substring(2, 16)).toUpperCase()
let imagesRef = firestorage.ref('postimages/' + rand)
console.log("imageRef, imageFile for eachfile", imageFile)
if(this.images.length < 3) {
// THIS PUSHES AN EMPTY CROPPA ("CLICK DRAGE IMAGE HERE") // max 5
this.images.push({})
console.log("imagesRef", imagesRef.fullPath)
}
this.updateImages ({
images: imagesRef.fullPath
})
},
'image/jpeg',
0.8,
)
})
},
updateImages(images) {
console.log("this is value from closure", images)
this.updateInformation({
images: images,
title: this.post.title,
description: this.post.description
})
},
这是我商店中的变异：
[UPDATE_INFORMATION] (state, info) {
console.log('[STORE MUTATIONS] - UPDATE_INFORMATION:', info)
Vue.set(state.newPost.images, 'images', [...info.images])
// state.newPost.images = info.images
state.newPost.title = info.title
state.newPost.description = info.description
state.newPost.location = info.location
state.newPost.city = info.city
},
我可以这样做吗？预先感谢您的任何建议。
我不知道您正在使用某些库，但我想我了解您正在尝试做的事情。简而言之，您尝试用传递图像路径数组的单个调用替换多个调用以更改存储状态。
切换前几行以使用Promises，如下所示：
const imagePromises = this.images.map(imageFile => {
return imageFile.promisedBlob('image/jpeg', 0.8).then(blob => {
然后在then回调内部返回相关的图像路径，而不是调用updateImages：
return imagesRef.fullPath
这将为您提供一系列可解析为所需路径的Promises。然后，您可以Promise.all用来等待所有的承诺：
Promise.all(imagePromises).then(imagePaths => {
// imagePaths should be an array of strings
this.updateImages(imagePaths)
})
那应该为您提供所需的路径字符串数组。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句