Firebase 在创建 Vue 之前加载数据答案

【问题标题】：Firebase load data before Vue createdFirebase 在创建 Vue 之前加载数据
【发布时间】：2019-02-13 02:21:14
【问题描述】：

<template>
  <f7-page>
    <f7-navbar>
        <f7-nav-left back-link="Zurück"></f7-nav-left>
        <f7-nav-right></f7-nav-right>
    </f7-navbar>
    <f7-list>
        <f7-list-item>{{this.test.testKey}}</f7-list-item>
    </f7-list>
    <!-- <f7-list v-for="email in this.test.data">
        <f7-list-item>{{email.email}}</f7-list-item>
    </f7-list> -->
    <pre>
        <p>{{this.test}}</p>
    </pre>
  </f7-page>
</template>
<script>
import *  as firebase from 'firebase'

export default {
    beforeCreate() {
        var this_ = this
        firebase.firestore().collection("tests").doc(this_.$f7route.params.testKey).onSnapshot({
        }, function(doc) {
            this_.test = ({data: doc.data()})
        })

        console.log(this.test)

    },
    data() {
        return {
            test: []
        }
    }
}
</script>

我的问题是，当视图加载时，似乎没有定义 firebase。 Pre 确实有效，但信息现在显示在列表元素中。我真的不知道这是为什么。

【问题讨论】：

标签： firebase vue.js google-cloud-firestore html-framework-7

【解决方案1】：

使用 created 而不是 beforeCreate，在创建 vue 实例之前，数据（以及随后的“测试”）对象不存在。请参阅 https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks 处的生命周期挂钩文档

【讨论】：