将字典传递给 Vue.js 商店

Question

我的 vue.js 产品中有一家商店，我想在其中添加以下格式的字典：

 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}          
          this.addPicture(addPicDic) })

这是我的 store.js：

export const store = {
    state: {
      pictures: []
    },
    addPicture(newPicture) {      
      this.state.pictures.push(newPicture);
    }
  };

但是每当我想在模板中渲染我的图片时，它都不起作用，并且{{ storeState.pictures }}会返回[ "[object Object]" ] 。 据我了解，我得到的是 object 的“对象”而不是“字典”，那么如何将我的数据传递到商店以便可以在其他模板中访问它们？

Answer 1

因此，查看该代码，您似乎正在尝试直接修改商店。 您应该通过突变更改商店的 state。 在理想的设置中，您的组件将有一个方法可以在商店中分派一个动作。 此异步操作将调用端点，然后使用突变提交。

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

在此处查阅文档中的突变和操作。

Answer 2

请注意， store.state.pictures是一个对象数组。

如果要渲染所有图像，可以使用v-for 。 它将遍历数组。

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

或者

如果您只想显示信息（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>

我假设storeState是一个计算属性，它映射到您的store.state

谢谢！

Answer 3

我的错误，我不得不将this.addPicture()更改为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) })