在AsynData Nuxt上运行Firebase

Question

我的问题是Nuxt上asyncData方法的firebase请求。 当应用程序在客户端上时，请求有效，但第一次加载无效。 因此，在服务器上，我是否安装了任何东西？

这是我的代码：

<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

@ Andrew1325指出的问题是，您没有从asyncData返回诺言。 这意味着服务器在将HTML发送给客户端之前不会等待请求完成。

另一方面，如何访问组件中的dataUsers ？

我建议您重新格式化代码以调度action

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

而一个简单的动作

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