通过渲染的组件道具更改 vuex 存储中数组中对象的值答案

【问题标题】：Changing value of object in an array in vuex store by the rendered component prop通过渲染的组件道具更改 vuex 存储中数组中对象的值
【发布时间】：2020-02-08 13:04:54
【问题描述】：

我在 vuex 存储中有一个对象数组。我把它带到一个页面并使用组件进行渲染。一切都好我想要的是能够更改我使用数据呈现组件的特定对象的值。我希望这是有道理的。我的主要问题是，如何修改数组中的特定对象

export const state = () => {  return {
villas: [
  {name: 'First', location:'a1', date:2014, rating:4.9}, 
  {name: 'Second', location:'a2', date:2014, rating:4.8}, 
  {name: 'Third', location:'a3', date:2014, rating:4.9}, 
  {name: 'Fourth', location:'a4', date:2014, rating:4.9}, 
  {name: 'Fourth', location:'a5', date:2014, rating:4.9}, 
  {name: 'Fourth', location:'a6', date:2014, rating:4.9}, 
  {name: 'Fourth', location:'a7', date:2014, rating:4.9}, 
  {name: 'Fifth', location:'a8', date:2014, rating:4.9}],  }}

我的页面

<v-layout class="go" row>
          <Gond v-for="villa in villas" :key="villa.name" :name="villa.name" :location="villa.location" :date="villa.date" :rating="villa.rating"/>
</v-layout>

和我的组件

  export default {
props: ['name', 'location', 'date', 'rating'],
data() {
  return {
  }
},

【问题讨论】：

我的组件很大，无法全部分享
那么您想以何种方式修改它们？我认为我们需要的不仅仅是目前可以为您提供的适当帮助。
您想在该商店之外进行的所有商店修改都应通过您必须在商店中定义的突变和相应的操作来完成。

标签： vue.js vuex nuxt.js

【解决方案1】：

您将需要创建一个操作和一个突变来更新商店数据

假设别墅名称是唯一的，

创建一个getter（可选），

getVillaByName: state => {
    return state.villas.filter(villa => villa.name)
}

创建一个动作

updateVillaByName ({commit }, payload) {
    commit('UPDATE_VILLA_BY_NAME', payload)
}

创建一个突变

UPDATE_VILLA_BY_NAME (state, updatedVilla) {

  // there are few different ways you can update the array of objects
  // one way is to go like below. Ref - [https://stackoverflow.com/questions/50422357/updating-object-in-array-with-vuex][1]

  state.villas = [
     ...state.villas.filter(element => element.name !== updatedVilla.name),
     updatedVilla
  ]
}

例如在你的组件中，

methods: {
  updateVillaLocation (newLocation) {

    let villa = this.$store.getters.getVillaByName(this.name)

    villa.location = newLocation

    this.$store.commit('updateVillaByName', villa)
  }
}

除了传递单个道具之外，您还可以简单地传递它，如下所示。这样当你想更新时，你可以制作一个别墅道具的副本并对其进行修改并将其发送到 store action

<Gond v-for="villa in villas" :key="villa.name" :villa="villa"/>

希望这能回答您的问题 :) 如果有帮助，请接受答案，如果您需要更多指导，请告诉我

【讨论】：