在AsynData Nuxt上运行Firebase

Question

My problem is the firebase request on asyncData method on Nuxt. When the app is on the client the request works but the first load doesn´t work. So, on the server, have i install anything?

This is my code:

<script>
 import { db } from '~/plugins/firebase.js'
 export default {
   asyncData (context) {
     let listUsers = []
      db.collection('users').get()
       .then(doc => {
          doc.forEach(user => {
            listUsers.push({ id: user.id, ...user.data() })
          });
       })

    return {
      dataUsers: listUsers  
    }
  }
}
</script>

Answer 1

The problem I see as @Andrew1325 noted, is that you do NOT return a promise from asyncData . This means that the server will NOT wait for the request to finish before sending HTML to the client.

On the other hand, how do you access your dataUsers in the component?

I suggest you to reformat the code to dispatch an action

<script>
 import { db } from '~/plugins/firebase.js'
 export default {
   asyncData ({store}) {
     return store.dispatch('FETCH_USERS')
  }
}
</script>

And the a simple action

async function FETCH_USERS = ({commit}) => {
    const doc = await db.collection('users').get()
    commit('SET_USERS', doc)
}