How to convert Vue.js realtime chat app from Realtime Database to Firestore

问题

I am attempting to build a realtime chatroom app with Vue.js and Firebase, based directly on the following tutorial: https://www.djamware.com/post/5d63586ee8e5fff670f31169/vuejs-tutorial-building-firebase-realtime-chat-web-app. This tutorial uses Firebase Realtime Database for managing chats in dynamically-created chatrooms. My goal is to fully convert the app from Realtime Database to Firestore. I have so far been successful in implementing firebase.get() and firebase.add() methods in the "Room.vue" and "AddRoom.vue" components, in order to add chatrooms to the database and return the chatrooms to the room list in "Room.vue". For "Chat.vue", I am having some issues with reconfiguring the created() life cycle hook to properly set user information in the database and display that user information in a selected chatroom. The current Realtime Database setup of the created() hook in the tutorial is as the following:

  created () {
    let joinData = firebase.database().ref('chatrooms/'+this.roomid+'/chats').push();
    joinData.set({
      type: 'join',
      user: this.nickname,
      message: this.nickname+' has joined this room.',
      sendDate: Date()
    });
    this.data.message = '';
    firebase.database().ref('chatrooms/'+this.roomid+'/chats').on('value', (snapshot) => {
      this.chats = [];
      snapshot.forEach((doc) => {
        let item = doc.val()
        item.key = doc.key
        this.chats.push(item)
      });
    });
  },

This hook enables the creation of a sub-collection inside chatrooms called chats, which receives the roomid generated in Room.vue and ultimately, returns user chat information to the template. I want to achieve something similar to this with Firestore, instead of Realtime database. So far, I have attempted to reconfigure the Chat.vue component as the following:

<script>

import { firebase } from '../Firebase'
import router from '../router'

export default {
  name: 'Chat',
  data () {
    return {
        roomid: this.$route.params.roomid,
        roomname: this.$route.params.roomname,
        nickname: this.$route.params.nickname,
        data: { type:'', nickname:'', message:'' },
        chats: [],
        errors: [],
        offStatus: false
    }
  },
  async created () {
    let joinData = await firebase.push()
    joinData.set({
      type: 'join',
      user: this.nickname,
      message: this.nickname+' has joined this room.',
      sendDate: Date()
    });
    this.data.message = '';
    let snapshot = await firebase.get()
    const chats = []
    snapshot.forEach(doc => {
      let appData = doc.data()
      appData.key = doc.key
      rooms.push(appData)
    })
      this.chats = chats
  }
  },
  methods: {
    onSubmit (evt) {
        evt.preventDefault()

        let newData = firebase.get()
        newData.add({
            type: 'newmsg',
            user: this.nickname,
            message: this.data.message,
            sendDate: Date()
        });
        this.data.message = '';
    },
    exitChat () {
      let exitData = firebase.get()
      exitData.set({
        type: 'exit',
        user: this.nickname,
        message: this.nickname+' has exited this room.',
        sendDate: Date()
      })

      this.offStatus = true
      router.go(-1)
    }
  }
}
</script>

...so that the life cycle hook and the methods instead push and retrieve data to and from Firestore. I am not sure how to configure the hook and methods to create and interact with a subcollection for chats inside an existing chatroom in Firestore, as was done in the Realtime Database example in the tutorial. Any recommendations how to achieve this with Firestore? Thanks!

来源：https://stackoverflow.com/questions/58249933/how-to-convert-vue-js-realtime-chat-app-from-realtime-database-to-firestore