Блог

Я пытаюсь сохранить данные с помощью метода created(), а затем получить к ним доступ с помощью метода mounted(), но данные, похоже, не сохраняются до конца. Есть ли способ сделать это?

Я настроил тест. В created() Я запускаю

 created() {
            this.getCountriesList();
        },
  

Это выполняет вызов axios для получения стран, а затем сохраняет их в data

 getCountriesList() {
                axios.get('https://restcountries.eu/rest/v2/all?fields=name')
                .then(axiosResult => this.countrydata = axiosResult.data) 
            },
  

Затем в mounted(), который, как мне показалось, идет дальше, я вызываю свой метод

 mounted() {
            this.countryFilteredList()

        }
  

Метод — это просто console.log

 countryFilteredList() {
                console.log(this.countrydata);
            },
  

Это возвращает

 [__ob__: Observer]
length: 0
__ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__: Array
  

но если я создам кнопку, которая при нажатии вызывает тот же countryFilteredList(), я получу это

 (250) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
[0 … 99]
[100 … 199]
[200 … 249]
  

Есть ли способ загрузить эти данные в mounted?

Вы не можете: выборка данных из конечной точки является асинхронной по своей природе, и mounted() перехват жизненного цикла не гарантирует, что данные были извлечены. Что вам нужно сделать, это просто поместить наблюдателя this.countrydata , а затем воздействовать на него, как только он будет заполнен.

 data: function() {
    return {
        countryData: []
    };  
},
created() {
    this.getCountriesList();
},
methods: {
    getCountriesList() {
        axios.get('https://restcountries.eu/rest/v2/all?fields=name')
        .then(axiosResult => this.countrydata = axiosResult.data);
    }
},
watch: {
    countryData: function(data) {
        if (data.length) {
            console.log(data);
        }
    }
}