如何在Vue.js中使用从一个挂钩到另一个挂钩的数据？

Question

In my vue.js application I send request by axios package in created() hook. I add response to array called coordinates . I want to use that array outside of created() hook. For example in mounted() hook or in functions which we can set in methods .

Right now when I tried to use self.coordinates outside created() hook it return undefined . When I use this.coordinates it return just [__ob__: Observer] . Whats wrong I did?

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

I think instead of mounted , you should use watch . You call some link so it will take time to load that data , watch method will trigger when your data is updated ...

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

Answer 2

I would prefer "mounted" and move the logic into methods for reusability. The method can be kicked from anywhere afterwards. In the example below, I prefered kicking the method direcly. Watchers is another option.

Here is the fiddle 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);
    }
  }
})