[Vuejs]-Passing a dictionary to Vue.js store

by

0👍

So looking at that code, it looks like you are trying to directly modify the store. You should change the state of the store via mutations. In an ideal setup, your component would have a method that would dispatch an action in the store. This asynchronous action would call the endpoint and then commit with a mutation.

state: {
  pictures: []
},
mutations: {
  addPicture(state, newPicture) {
    state.pictures.push(newPicture)
  }
}

Consult mutations and actions in the documentation here.

0👍

Note that store.state.pictures is an array of objects.

If you want to render all images, you can use v-for. It will iterate over the array.

<template>
  <div>
    <img v-for="pic in storeState.pictures" :key="pic.id" :src="pic.url">
  </div>
</template>

OR

If you want to display just information (id, urls),

<template>
  <div>
    <ul>
      <li v-for="pic in storeState.pictures" :key="pic.id" > ID: {{pic.id}} | URL: {{pic.url}} </li>
    </ul>
  </div>
</template>

I assumed that storeState is a computed property which is mapped to the your store.state

Thanks!

0👍

My mistake, I had to change this.addPicture() for store.addPicture():

axios.post(`http://127.0.0.1:8000/api/${this.endpoint}/`, fd, axiosConfig)
        .then(res => {                       
          let newPictureUrl = res.data.picture_1
          let newPictureId = res.data.id
          let addPicDic = {"url": newPictureUrl, "id": newPictureId}          
          store.addPicture(addPicDic) })

Leave a comment