https://codesandbox.io/s/admiring-taussig-xx34mstate.setting в main.js - пустой объект с неким прототипом дефолтных значений
component1 - форма на 2 поля, которая в инпутах выводит в value settings.param1 и settings.param2 соответственно (значения подтягиваются из прототипа, всё ок)
component 2 - рендер значений state.settings на страницу, чтобы видеть их актуальное значение именно в vuex хранилище, а не локальное состояние из компонента1
component 3 - рендер state.settings объекта преобразованного в JSON , чтобы видеть, какие свойства принадлежать именно самому объекту, а не прототипу объекта.
—
Проблема.
Когда в компоненте1 мы делаем меняем значение в одном из инпутов - срабатывает
@input событие, которое успешно перезаписывает это свойство внутри объекта settings, делая его явным (попадает в JSON теперь). Но при этом весь изначальный прототип дефолтных свойств стирается (видно, что пропадает значение соседнего поля, - или можно по в консоли посмотреть, что изначального моего прототипа state.settings больше нет)
А мне нужно чтобы
- и реактивность сохранялась (компонент2 обновлялся)
- и изначальный мой прототип сохранялся (не вытирались дефолтные данные из полей 1 компонента)
- и в итоговый JSON попадал не весь прототип ЦЕЛИКОМ, а только перезаписаенные пользователем данные