Является ли хорошей практикой мутировать Vuex с Vue .set объектом, который также является наблюдаемым

Question

Ожидается достижение: Самый правильный способ изменить указанную c запись, сохраненную в состоянии Vuex с одной большой (пакетной) записью

Контекст: Vuex состояние содержит список записей со значениями по умолчанию для каждой записи.

Logi c Компонент инициализируется и использует getter для получения одной из записей. Необходимо добавить новые свойства в запись и перезаписать существующие значения.

Вопрос Допустимо ли изменять объект, возвращаемый геттером Vuex, и затем фиксировать весь результат в состояние? И если да, то каков будет наилучший подход, учитывая, что он должен будет перезаписать существующую запись в Vuex.

PS: Мне также интересно, может ли это привести к нарушению поведения других компонентов, которые "получают" ту же запись это будет перезаписано, и будет очень ценить ваши мысли на эту топи c: -)

Answer 1

Не изменяйте данные Vuex, кроме как с помощью мутации Vuex

1) Сначала клонируйте запись-получатель. Убедитесь, что вы глубоко клонировали, если у вашей записи есть что-то кроме примитивных свойств, то есть у нее есть свойства, которые являются объектами или функциями. Вот несколько вариантов клонирования , обратите внимание, что многие не могут правильно углубить клон.

2) Как только вы закончите мутировать клон, вызовите действие Vuex, и пусть это действие вызовет мутацию , Рекомендуется вызывать мутации только из действий.

3) В этой мутации используйте Vue.set (или splice) для замены записи состояния.

4) Да, если вы мутировал напрямую геттер, он мутировал везде, где бы он ни использовался.

Answer 2

См. Изменение предупреждений об обнаружении в руководстве по реактивности VueJS.

Иногда вам может потребоваться назначить несколько свойств существующему объекту, например, используя Object. назначить () или _.extend (). Однако новые свойства, добавленные к объекту, не будут вызывать изменений. В таких случаях создайте объект fre sh со свойствами как исходного объекта, так и объекта mixin:

// instead of `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })