SimBioT19
@SimBioT19
{{ user.about }}

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

Массив экземпляров какого-то класса 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 используется в нескольких разных местах, мне везде придётся прописывать методы слушателей, а это дублирование кода.

Как будет правильно?
  • Вопрос задан
  • 155 просмотров
Пригласить эксперта
Ответы на вопрос 2
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
nuykon
@nuykon
Full Stack Developer
Я не знаю чего вы хотите достичь. Решить можно по разному. Но раз у вас 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
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
07 мар. 2021, в 03:18
1500 руб./за проект
06 мар. 2021, в 22:58
70000 руб./за проект
06 мар. 2021, в 22:36
10000 руб./за проект