Как получить доступ к данным экземпляра VUE во время выполнения

Question

мой вопрос довольно прост, я хочу назначить данные во время выполнения и получить их снова в экземпляре vue

 data() {
    return {
      panels:[],
    };
  },
  created() {
    this.fetchPanels();
    //console.log(this) , i can find panels already assigned in this instance
    //console.log(this.panels) , it gives me zero array
  },
  methods: {

    fetchPanels() {
        this.$http
        .get(Shared.siteUrl+"/api/" + this.category_title + "/panels")
        .then(function(response) {
          this.panels = response.body.data;
        });
    },

Answer 1

Если вы собираетесь использовать async / await (и я согласен, что вы должны), вы должны сделать это и для вызова http.await somefunc().then() похоже на плохое смешение стилей.Преимущество также в том, что он короче.

data() {
  return {
    panels:[],
  };
},
async created() {
  await this.fetchPanels();

  console.log(this.panels);
},
methods: {
  async fetchPanels() {
    const response = await this.$http.get(Shared.siteUrl + "/api/" + this.category_title + "/panels")

    this.panels = response.body.data;
  },

Имейте в виду, что жизненный цикл Vue не ожидает ваших асинхронных хуков жизненного цикла.Это не будет проблемой в этом примере, но это определенно хорошо иметь в виду.Т.е., если бы вы добавили

mounted() {
  console.log(this.panels);
},

, он бы получился пустым, потому что асинхронные задачи в created() теперь будут выполняться после mounted()

Answer 2

Как утверждают разработчики, vue-resouce использует асинхронные задачи обещания и ожидает, пока не выдаст свои данные

data() {
    return {
      panels:[],
    };
  },
  async created() {
    await this.fetchPanels();
    console.log(this.panels)
  },
  methods: {

    fetchPanels:async function() {
        await this.$http
        .get(Shared.siteUrl+"/api/" + this.category_title + "/panels")
        .then((response) => {
          this.panels = response.body.data;
        });
    }

Answer 3

Ваш console.log(this.panels) будет вызван перед асинхронным запросом.Кроме того, используйте функцию стрелки вместо.

data() {
    return {
      panels:[],
    };
  },
  created() {
    this.fetchPanels();
    //console.log(this) , i can find panels already assigned in this instance
    //console.log(this.panels) , don't use this here
  },
  methods: {

    fetchPanels() {
        this.$http
        .get(Shared.siteUrl+"/api/" + this.category_title + "/panels")
        .then((response) => {
          this.panels = response.body.data;
          console.log(this.panels);
        });
    }