Как избежать мутации props?

Question

[SimBioT19]

Массив экземпляров какого-то класса items[] лежит в vuex, используется много где и заодно выводится в редактируемом списке:

<ul>
<v-list-component :item=item v-for=item in items/>
</ul>

Внутри v-list-component вызываются методы API, изменяется каждый item.
И внутри этого компонента я напрямую меняю свойства переданного item, условно:

computed: {
 _value: {
  get() {
   return this.item.name;
  },
  set(val) {
    this.item.name = val; // Ошибка mutating prop
    ...
  }
}

Я понимаю, что это неправильно, но как я должен поступать?
Эмитить события с обновлением наверх, чтобы там разбирались с изменениями?

Просто если у меня v-list-component используется в нескольких разных местах, мне везде придётся прописывать методы слушателей, а это дублирование кода.

Как будет правильно?

Answer 1

[Rsa97]

Vuex

Answer 2

[Сергей Левченко]

Я не знаю чего вы хотите достичь. Решить можно по разному. Но раз у вас items во vuex - значит как минимум надо использовать - mutations/actions
на примере вашего кода:

set(val) {
    this.$store.dispatch('updateItem', { id: this.item.id, val });
  }

ну и в сторе естественно надо будет написать action и mutation

и стоит задавать key для элементов в списках <v-list-component :key="item.id"> иначе могут возникнуть проблемы при ререндере

еще вариант без computed:
то что прилетело из props скопировать в локальное состояние (data()), его можно перезаписывать и ошибок не будет, добавить watch на изменение свойства в data и там опять же вызывать action из vuex