javascript - 获取的存储属性在计算的页面上返回未定义

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")
    }
}