Как правильно добавлять данные в начальное состояние Vue.data из axios response?

Question

[Никита Кит]

Задаю в корневой экземпляр Vue начальное состояние данных

data:function(){ return {
				Config: {},
				list: [],
				activeService: ''
			}},

По хуку created я запрашиваю с сервера json - в нём объект. В Конфиге csrf, в list массив объектов, json соответствует начальным состояниям в колбэке data.

created: function(){
				axios.get("/jsondata/stepdata/step-1.json")
				.then(function(response){
					rootVueSteplist.$data = response.data;
				})
			}

Ловлю ошибку: Avoid replacing instance root $data. Use nested data properties instead.
Окей, действительно - я же просто вытаюсь создать ссылку на объект... Поступаю по другому.

created: function(){
				axios.get("/jsondata/stepdata/step-1.json")
				.then(function(response){
					rootVueSteplist.$data = Object.assign(rootVueSteplist.$data, response.data)
				})
			}

И снова ловлю ошибку. Ту же самую. Стало интереснее - поэкспериментировал дальше.
Такое работает:

created: function(){
				axios.get("/jsondata/stepdata/step-1.json")
				.then(function(response){
					rootVueSteplist.$data.Config = response.data.Config;
					rootVueSteplist.$data.list = response.data.list;
				})
			}

Но это говнокод. Мб кто-то знает в чём проблема? Гуглить ошибки vuejs просто вынос мозга
UPD: попробовал применить метод set экземпляра vue и был послан ошибкой подлинее:

created: function(){
				axios.get("/jsondata/stepdata/step-1.json")
				.then(function(response){
					rootVueSteplist.$set(rootVueSteplist.$data, response.data)
					// rootVueSteplist.$data = Object.assign(rootVueSteplist.$data, response.data)
				})

Либо я тупой, либо лыжи г**но....
Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option

Answer 1

[0xD34F]

rootVueSteplist.$data = Object.assign(rootVueSteplist.$data, response.data)

Присваивание не нужно. Object.assign модифицирует объект, переданный первым аргументом. Т.е., достаточно просто

Object.assign(rootVueSteplist.$data, response.data);

Или даже Object.assign(rootVueSteplist, response.data);, ведь как нам докладывает документация про $data,

Экземпляр проксирует сюда вызовы своих полей. (Например, vm.a будет указывать на vm.$data.a)

Comments

[Никита Кит]

Да, спасибо, заработало гладко. Надо привыкать, к object.proxy нужен свой подход. Отказ от object.observe всё же вносит некие некие неудобства и затупы. Это, пожалуй, временное явление - привыкну. Только начал осваивать свой первый фреймворк

Answer 2

[imhuman]

Ну ты не можешь напрямую $data присвоить новое значение во время выполнения. Сделай внутри $data какоe-нибудь свойство и кидай ответ уже в него

Comments

[Никита Кит]

rootVueSteplist.$data.Config = response.data.Config;
rootVueSteplist.$data.list = response.data.list;

Объясню почему это говнокод - с каждой новой связкой ключа со значением в json, запращиваемый при инициализации рута, тебе нужно лезть в колбэк axios и дописывать присвоение.

[Антон Швец]

Никита Кит, он же не об этом говорит.

data() { 
   return {
        income: {},
   },
created() {
   axios.get("/jsondata/stepdata/step-1.json")
   .then((response) => {
       this.income = response.data;
    })
},

Модифицировать $data мне даже в голову не приходило. Пусть Vue сам заботится о реактивности, стараюсь трогать внутренную кухню по минимуму.

[jakekutsel]

Вместо присвоения используйте this.$set. это поможет избежать биндинга ссылок на объекты, а не самих значений. Object.assign делает по сути то же самое, но решение с this.$set мне нравится больше.

Пример: this.$set(this, 'data', response.data)

Правда, если используется не стрелочная функция, то нужно заботиться об актуальности контекста

[Никита Кит]

jakekutsel, ага, я понял. Избегаем мутаций