时间戳

首页 > 解决方案 > 在 AsynData Nuxt 上运行 Firebase

javascript - 在 AsynData Nuxt 上运行 Firebase

问题描述

我的问题是对 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>

标签： javascriptservernuxt.js

解决方案

我看到@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)
}

推荐阅读