Изменение значения объекта в массиве в хранилище vuex с помощью обработанного компонента prop

Question

У меня есть массив объектов в хранилище vuex. Я беру это на страницу и рендеринг с использованием компонентов. все в порядке, что я хочу, чтобы иметь возможность изменить значение объекта spesifi c, я использую данные для визуализации компонента. Я надеюсь это имеет смысл. Моя главная проблема заключается в том, как я могу изменить объект spesifi c в массиве

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

Answer 1

Вам потребуется создать действие и мутацию для обновления данных магазина.

При условии, что названия вилл уникальны,

Создать геттер (необязательно),

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

Кроме того, вместо передачи отдельных реквизитов, вы можно просто передать как ниже. Таким образом, когда вы захотите обновить, вы можете сделать копию реквизита виллы, внести в нее изменения и отправить ее для сохранения действия

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

Надеюсь, что это ответ на ваш вопрос :) Пожалуйста, примите ответ, если он помог, и дайте мне знать, если вам нужно больше указаний