Извлеченное свойство магазина возвращает неопределенное значение на вычисленной странице

Question

Итак, у меня есть Магазин, который заполняется данными поста, которые затем отображаются на странице, но по какой-то причине переменные поста не определены.Вот некоторый код:

Асинхронная выборка в компоненте

async fetch({ store, route }) {
    db.collection("posts")
      .doc(route.params.id)
      .get()
      .then(doc => {
        if (doc.exists) {
          var x = doc.data()
          x.docID = doc.id
          store.commit("modules/posts/pushPost", x)
        } else alert("No Post found")
      })
},

Вычисляемое свойство в компоненте

 computed: {
    post() {
      var posts = this.$store.state.modules.posts.posts
      return posts.find(x => x.docID === this.$route.params.id)
    },

Сохранить фиксацию

pushPost(state, post) {
    state.posts.push(post)
    console.log(post)
    console.log("pushed")
  }

Обе консоли входят в триггер магазина и отображают правильные значения. Но по какой-то причине вычисленный пост на моей странице не определен

Answer 1

Я бы полностью забыл об обратном вызове .then в данном конкретном случае.Если вы закодируете его так, как показано в следующем примере, у вас точно не возникнет проблем с неопределенными данными, и это намного более чистый код.

async fetch({ store, route }){
    const doc = await db.collection("posts").doc(route.params.id).get()

    if(doc.exists) {
      const x = doc.data()
      x.docID = doc.id
      store.commit("modules/posts/pushPost", x)
    } else {
      alert("No Post found")
    }
}

Answer 2

Я нашел источник проблемы.

Ключевое слово await перед вызовом db для извлечения данных отсутствовало, что привело к тому, что компонент был готов слишком быстро до фактического заполнения хранилища, что, очевидно, вызвалоданные должны быть неопределенными.