The messages are now read from the database

src/components/Friends.vue

@@ -2,7 +2,7 @@
 q-toolbar.bg-primary.text-white.shadow-2
   q-toolbar-title Contacts
 q-list(bordered)
-  q-item.q-my-sm(v-for='(user, key) in users', :key='key', to='/chat', clickable, v-ripple)
+  q-item.q-my-sm(v-for='(user, key) in users', :key='key', :to='"/chat/" + key', clickable, v-ripple)
     q-item-section(avatar)
       q-avatar(color='primary', text-color='white')
         | {{ user.name.charAt(0) }}

src/pages/Chat.vue

@@ -17,24 +17,12 @@ q-footer(elevated)
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex'
+
 export default {
   data() {
     return {
-      newMessage: '',
-      messages: [
-        {
-          text: 'Hello',
-          from: 'me'
-        },
-        {
-          text: 'Hi',
-          from: 'them'
-        },
-        {
-          text: 'How are you?',
-          from: 'me'
-        }
-      ]
+      newMessage: ''
     }
   },
 
@@ -45,7 +33,21 @@ export default {
         from: 'me'
       })
       this.newMessage = ''
-    }
+    },
+    ...mapActions('firebase', ['firebaseGetMessages', 'firebaseStopGettingMessages'])
+  },
+
+  computed: {
+    ...mapState('firebase', ['messages'])
+  },
+
+  mounted() {
+    this.firebaseGetMessages(this.$route.params.otherUserId)
+  },
+
+  // Fire when the user leaves the page
+  unmounted() {
+    this.firebaseStopGettingMessages()
   }
 }
 </script>

src/router/routes.js

@@ -8,7 +8,7 @@ const routes = [
     ]
   },
   {
-    path: '/chat',
+    path: '/chat/:otherUserId',
     component: () => import('layouts/ChatLayout.vue'),
     children: [
       { path: '', component: () => import('pages/Chat.vue')}

src/store/firebase.js

 import { firebaseAuth, firebaseDb } from 'boot/firebase'
 
+let messagesRef
+
 const state = {
   userDetails: {},
-  users: {}
+  users: {},
+  messages: {}
 }
 
 const mutations = {
@@ -16,6 +19,14 @@ const mutations = {
 
   updateUser(state, payload) {
     Object.assign(state.users[payload.userId], payload.userDetails)
+  },
+
+  addMessage(state, payload) {
+    state.messages[payload.messageId] = payload.messageDetails
+  },
+
+  clearMessages(state) {
+    state.messages = {}
   }
 }
 
@@ -108,6 +119,28 @@ const actions = {
         userDetails
       })
     })
+  },
+
+  firebaseGetMessages({ state, commit }, otherUserId) {
+    let userId = state.userDetails.userId
+    messagesRef = firebaseDb.ref('chats/' + userId + '/' + otherUserId)
+    messagesRef.on(
+      'child_added', snapshot => {
+        let messageDetails = snapshot.val()
+        let messageId = snapshot.key
+        commit('addMessage', {
+          messageId,
+          messageDetails
+        })
+      }
+    )
+  },
+
+  firebaseStopGettingMessages({ commit }) {
+    if (messagesRef) {
+      messagesRef.off('child_added')
+      commit('clearMessages')
+    }
   }
 }