在 Vue.js 中渲染 firestore 值

Question

我正在尝试构建一个简单的应用程序，但在获取我试图从 Firestore 中提取的 Vue 渲染数据时遇到了麻烦。下面是有人登录后的 vue 页面的代码。基本上我只是想让它显示登录人的姓名。目前我将每个用户的显示名称作为 get() 函数的文档 ID .现在，它甚至看起来都没有运行“firestore()”函数，因为我一开始就尝试将一些文本输出到控制台，但我没有看到它。知道这里发生了什么吗？谢谢！

<template>
  <v-container fluid>
    <v-layout row wrap>
      <v-flex xs12 class="text-xs-center" mt-5>
        <h1>Home page</h1>
      </v-flex>
      <v-flex xs12 class="text-xs-center" mt-3>
        <p>Welcome {{ name }}</p>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import firebase from 'firebase'
export default {
  data () {
    return {
      name: ''
    }
  },
  firestore () {
    firebase.firestore().collection('user').doc(firebase.auth().currentUser.displayName).get()
    .then(doc => {
      if (doc) {
        var data = doc.data()
        return {
          name: data.name
        }
      } else {
        console.log('No document exists')
      }
    }).catch(error => { console.log('Error: ' + error) })
  }
}
</script>

Answer 1

您可以为此目的使用created 钩子。

created() {
  firebase.firestore().collection('user').doc(firebase.auth().currentUser.displayName).get()
    .then(doc => {
      if (doc) {
        var data = doc.data()
        this.name = data.name
      } else {
        console.log('No document exists')
      }
    }).catch(error => { console.log('Error: ' + error) })
}

如果你使用vuefire，你可以这样做

firestore: {
  users: firebase.firestore().collection('user').doc(firebase.auth().currentUser.displayName)
}

然后在你的 Vue 代码中使用 this.users