Как получить доступ к объекту с установленного крючка в Vuejs

Question

Я хочу получить доступ к объекту данных в смонтированном хуке, но когда я пытаюсь получить доступ к данным, в консоли выдается undefine.

Это мой исходный код

export default {

data() {
  return {
    channel: {},
    subscription: {},

  }

},

methods: {

  read() {
    axios.get('/api/get/details').then(({ data }) => {
      this.channel= data;

    })
      .catch((err) => console.error(err));
  },
},



  mounted() {

      this.read();

      console.log(this.channel.data.userid)

      fetch("https://url/v1/launch/1/details")
        .then(response => response.json())
        .then(json => {
          this.subscription = json
        });


    }

  }

но когда я консоль this.channel.data.userid я набираю undefine

Answer 1

Ваш код асинхронный, вы имеете в виду, что console.log не ждет, пока this.read() завершится. Изменение его на следующее должно работать.

export default {

data() {
  return {
    channel: {},
    subscription: {},

  }

},

methods: {

  async read() {
    const { data } = await axios.get('/api/get/details')
    this.channel = data;
  },
},



  async mounted() {

      await this.read();

      console.log(this.channel.data.userid)

      fetch("https://url/v1/launch/1/details")
        .then(response => response.json())
        .then(json => {
          this.subscription = json
        });


    }

  }

Подробнее об asyn c и Promise

Answer 2

У вас проблема с синхронизацией. Сделайте свои функции асинхронными и дождитесь его завершения.

export default {

  data() {
    return {
      channel: {},
      subscription: {},
    }
  },

  methods: {

    async read() {
      await axios.get('/api/get/details').then(({ data }) => {
        this.channel= data;
      })
      .catch((err) => console.error(err));
    },
  },

  async mounted() {

      await this.read();

      console.log(this.channel.data.userid);

      fetch("https://url/v1/launch/1/details")
        .then(response => response.json())
        .then(json => {
          this.subscription = json
      });
  }
}