vue.set() an array in a vuex mutation

Question

I am trying to vue.set() an array in a "updateInformation" mutation in my vuex store.

Here is my function in my script:

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

This is the mutation in my store:

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

Can I do this? Thank you in advance for any suggestions.

What is the initial state of the newPost object when your store is created? — Jason Smith
– Jason Smith, Commented Jan 11, 2020 at 8:32
newPost: { images: '', title: '', description: '', location: '', city: '' }, — Teoman Kirac
– Teoman Kirac, Commented Jan 11, 2020 at 9:08
Are you trying to create an images property inside an images property? I'd guess you just want Vue.set(state.newPost, 'images', [...info.images]). — skirtle
– skirtle, Commented Jan 11, 2020 at 9:10
That suggests that info.images is not an array. Difficult to know what to suggest without knowing why you're trying to spread a non-array into an array. If images is just a string then why are you involving arrays at all? — skirtle
– skirtle, Commented Jan 11, 2020 at 9:20
@TeomanKirac see my answer below. Also, skirtle makes a good point in their answer regarding the method you use to prepare the data before committing the mutation. — Jason Smith
– Jason Smith, Commented Jan 11, 2020 at 9:58

T. Short · Accepted Answer · 2020-01-11 09:05:23Z

2

Why not just do it like this:

[UPDATE_INFORMATION] (state, info, payload) {
    state.newPost = {
        ...state.newPost,
        ...info
    }
}

answered Jan 11, 2020 at 9:05

T. Short

3,62417 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pavel Levin Over a year ago

This will work, but the example is bad. If the state is large, then it will be completely renewed, and not partially.

skirtle · Accepted Answer · 2020-01-11 09:53:53Z

1

I don't know some of the libraries you're using but I think I understand what you're trying to do. In short, you're trying to replace multiple calls to mutate the store state with a single call that passes an array of image paths.

Switch the first few lines to use Promises, like this:

const imagePromises = this.images.map(imageFile => {
  return imageFile.promisedBlob('image/jpeg', 0.8).then(blob => {

Then inside the then callback return the relevant image path rather than calling updateImages:

return imagesRef.fullPath

This will give you an array of Promises that resolve to the paths you want. You can then use Promise.all to wait for all the Promises:

Promise.all(imagePromises).then(imagePaths => {
  // imagePaths should be an array of strings
  this.updateImages(imagePaths)
})

That should get you the array of path strings that you want.

answered Jan 11, 2020 at 9:53

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

1 Comment

Teoman Kirac Over a year ago

i see! think this is the answer, will give it a try and respond. Just really quickly however I can't get it to "return imagesRef.fullPath" for some reason.. will get back after i do more thorough attempt. . thank you.

Jason Smith · Accepted Answer · 2020-01-11 09:54:07Z

-1

You do not need to use Vue.set(). The purpose of Vue.set() is to add new properties to an object, not to change existing properties.

In your Vuex initial state, it would make most sense to me to initialize this way:

newPost: { images: [], title: '', description: '', location: '', city: '' }

Now your images property is an array, as expected, rather than a string.

In the UPDATE_INFORMATION mutation, you can do either:

state.newPost.images = info.images

Or:

state.newPost.images = [...info.images]

If you want a shallow copy of the info.images array instead of referring to it directly.

answered Jan 11, 2020 at 9:54

Jason Smith

1,2098 silver badges19 bronze badges

Collectives™ on Stack Overflow

vue.set() an array in a vuex mutation

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related