Firebase VUEJS+；Firestore如何输出数据？

我创建了一个帖子并将其存储在

Cloud Firestore

中，现在我想在名为

Dashboard.vue

的

vueJs

文件中输出数据

但我不知道它是如何工作的。我自己尝试了一些想法，但没有一个好的结果

那么我如何输出这些数据呢

档案：

Firebase => Cloud Firestore 

已在firebase中创建post数据：

及

在

vueJs

post.vue

    createPost () {
       fb.postsCollection.add({
        postDetails: {
        createdOn: this.postDetails.createdOn,
        content: this.postDetails.content,
        userId: this.currentUser.uid,
        image: this.postDetails.image,
        comments: this.postDetails.comments,
        likes: this.postDetails.likes
      }
      }).then(ref => {
          this.post.content = ''
          this.$router.push('/dashboard')
      }).catch(err => {
          console.log(err)
      })
    }

按以下步骤进行：

在数据中创建

posts

数组：

...
data() {
    return {
        posts: []
    }
},
....

然后创建一个获取记录并将结果分配给

posts

数组的方法：

 methods:{
   getPosts: function() {

    fb.postsCollection.orderBy('createdOn', 'desc').onSnapshot(querySnapshot => {
        let postsArray = []

        querySnapshot.forEach(doc => {
            let post = doc.data()
            post.id = doc.id
            postsArray.push(post)
        })

        this.posts = postsArray;
    })

   }
 },
 .....

调用

beforeMount（）

生命周期挂钩中的方法：

 beforeMount(){
    this.getPosts()
 },

然后将帖子渲染到DOM。例如：

<div v-if="posts.length">
    <div v-for="post in posts">
        <h4>{{ post.createdOn }}</h4>
        <p>{{ post.content}}</p>
        <ul>
            <li>comments {{ post.comments }}</li>
        </ul>
    </div>
</div>
<div v-else>
    <p>There are currently no posts</p>
</div>

{{post.createdOn}}
{{post.content}


评论{{post.comments}}

目前没有员额

按以下步骤操作：

在数据中创建

posts

数组：

...
data() {
    return {
        posts: []
    }
},
....

然后创建一个获取记录并将结果分配给

posts

数组的方法：

 methods:{
   getPosts: function() {

    fb.postsCollection.orderBy('createdOn', 'desc').onSnapshot(querySnapshot => {
        let postsArray = []

        querySnapshot.forEach(doc => {
            let post = doc.data()
            post.id = doc.id
            postsArray.push(post)
        })

        this.posts = postsArray;
    })

   }
 },
 .....

调用

beforeMount（）

生命周期挂钩中的方法：

 beforeMount(){
    this.getPosts()
 },

然后将帖子渲染到DOM。例如：

<div v-if="posts.length">
    <div v-for="post in posts">
        <h4>{{ post.createdOn }}</h4>
        <p>{{ post.content}}</p>
        <ul>
            <li>comments {{ post.comments }}</li>
        </ul>
    </div>
</div>
<div v-else>
    <p>There are currently no posts</p>
</div>

{{post.createdOn}}
{{post.content}


评论{{post.comments}}

目前没有员额