Выборка данных с помощью созданного vue хука жизненного цикла, но, похоже, не заполняет результат обещания

Question

С моим ограниченным знанием vue я сталкиваюсь с проблемой, когда, если я не вызову метод asyn c в шаблоне vue js, я не смогу получить доступ к результатам обещания, даже если я вызвать метод asyn c в хуке жизненного цикла created. Насколько я понимаю, created заключается в том, что он вызывается раньше, поэтому могут запускаться асинхронные c операции, такие как выборка данных из API.

. Как вы увидите в приведенном ниже коде, функция loadAlerts() вызывается в пределах created. Однако, если я не вызову {{loadAlerts()}} в шаблоне, я не смогу использовать результат обещания alerts в li, который следует непосредственно за ним. Проблема вызова {{loadAlerts}} в шаблоне заключается в том, что [object Promise] также отображается в шаблоне. Если я удалю {{loadAlerts}} из шаблона, то ни одно из моих предупреждений не появится.

Разве вызов в created не должен уже заполнять результат обещания, например: alerts? Как вы увидите из приведенного ниже кода, я закомментировал {{loadAlerts()}} прямо перед циклом прохождения предупреждений. Без этого я не вижу никаких предупреждений.

Что мне нужно для этого сделать

1. alerts по-прежнему будет заполняться без необходимости вызывать loadAlerts в шаблоне (ie, вызывать его в created или mounted вместо)

OR

alerts будет по-прежнему заполняться, но [object Promise] не отображается

Я полагаю, вариант 1, вероятно, более элегантный и рекомендуемый способ?

<template>
 <div v-if="alerts">
  <h4>{{ title }}</h4>
  <!-- {{loadAlerts()}} -->
  <li v-for="alert in alerts" class="alert">
     {{ alert.name }}
  </li>
 </div>
</template>

export default {
  data () {
    return {
      alerts: null
    }
  },

  computed: {
    ...mapGetters('authentication', ['token']),
    ...mapGetters('user', ['profile']),

    title () {
      // Handle the null case
      const alerts = this.alerts || []

      return `My Alerts (${alerts.length})`
    }
  },

  methods: {
    // This needs to be in the methods, not a computed property
    loadAlerts () {
      return getUserAlert({
        user_id: this.profile.user_id,
        token: this.token
      }).then(response => (this.alerts = response.data)).catch(
        error => console.log(error)
      )
    }
  },

  // Initiate loading in a hook, not via the template
  created () {
    this.loadAlerts()
  }
}
</script>

Answer 1

Не должно быть никаких причин для вызова функции в шаблоне. Вероятно, происходит то, что user_id и / или token еще не доступны во время ловушки created. Таким образом, вы не увидите результатов. (Проверьте это, предупредив их - не входя в консоль.)

Когда вы добавляете метод в шаблон, если позже произойдет какое-либо повторное рендеринг, вызов asyn c будет выполнен снова. В какой-то момент это, вероятно, происходит, когда user_id и token доступны , поэтому вы видите данные.

По этой причине это тоже не очень хорошая модель: будет другой Вызывайте API каждый раз, когда шаблон перерисовывается, даже после того, как он работает один раз.

Одно из решений - это обещание исходной загрузки user_id / token, которое вы можете передать этому составная часть. Затем хук created может зарегистрировать свои действия в then этого обещания.