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

我找到了问题的根源。

缺少用于获取数据的db调用之前的await关键字，这导致在实际填充存储之前组件准备得太快，这显然导致数据未定义。

获取的商店属性在计算的页面上返回未定义

2 个答案: