javascript - 在 AsyncData 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 返回 promise 。这意味着服务器在向客户端发送 HTML 之前不会等待请求完成。

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

我建议您重新格式化代码以分派(dispatch)操作

<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)
}