Как использовать данные из одного хука в другой хук в Vue.js?

Question

В моем приложении vue.js я отправляю запрос с помощью пакета axios в created() крюке.Я добавляю ответ в массив с именем координаты .Я хочу использовать этот массив за пределами created() хука.Например, в mounted() ловушке или в функциях, которые мы можем установить в methods.

Прямо сейчас, когда я пытался использовать self.coordinates вне created(), ловушка возвращает undefined.Когда я использую this.coordinates, он возвращает просто [__ob__: Observer].Что я не так сделал?

export default {
    name: "Map",
    data() {
        return {
            coordinates: [],
        }
    },
    created() {
        let self = this;
        axios.get('URL').then(function (response) {
            let coordinates = [];
            for (let i = 0; i < response.data.length; i++) {
                coordinates.push([response.data[i]["LATITUDE"], response.data[i]["LONGITUDE"]]);
            }
            self.coordinates = coordinates;
        });
    },
    mounted() {
        console.log(self.coordinates); // undefined
        consol.log(this.coordinates);  // [__ob__: Observer]
    },
}

Answer 1

Я бы предпочел «смонтированный» и перенести логику в методы для повторного использования.Метод может быть удален из любого места впоследствии.В приведенном ниже примере я предпочел бы пнуть метод прямо.Наблюдатели - это еще один вариант.

Вот скрипка https://jsfiddle.net/dj79ux5t/2/

new Vue({
    el: '#app',
    data() {
        return {
            coordinates: []
        }
    },
    mounted() {
        let self = this;
        axios.get('https://api.weather.gov/').then(function (response) {
            self.coordinates = response.data;
            self.greet();
        });
    },
  methods: {
    greet: function () {
        console.warn(this.coordinates.status);
    }
  }
})

Answer 2

Я думаю, что вместо установленного, вы должны использовать часы.Вы вызываете какую-то ссылку, поэтому для загрузки этих данных потребуется время, при обновлении ваших данных сработает метод watch ...

watch: {
    coordinates: {
      handler: function (updateVal, oldVal) {
        console.log(updateVal)
      },
      deep: true
    }
  },