Javascript Firebase-Vue |基本设置不'；无法检索数据

我遇到了这个问题，我一直试图让Vue从firebase检索至少非常基本的设置。没有。我走了很多路，但都没什么效果，所以也许我错过了一些东西，也许是显而易见的

我在控制台中没有任何错误，除了没有检索到任何内容之外，一切似乎都正常工作。网络连接似乎无法检索到任何可能与数据库相关的响应。 这是firebase的截图，可能我误解了firebase和设置：

//Main.js

/* eslint-disable semi */
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';
import VueFire from 'vuefire';

Vue.use(VueFire);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

/*eslint禁用半自动*/
//要使用“导入”命令加载的Vue生成版本
//（仅限运行时或单机版）已在webpack.base.conf中使用别名设置。
从“Vue”导入Vue；
从“./App”导入应用程序；
从“./router”导入路由器；
从“VueFire”导入VueFire；
Vue.use（VueFire）；
Vue.config.productionTip=false
/*eslint禁用无新*/
新Vue({
el:“#应用程序”，
路由器，
组件：{App}，
模板：“”
})

//App.vue

<template>
  <div id="app">
    <p>This will render</p>

    <div v-for="message in messages" :key="message.text"> <!-- This will NOT -->
    <h4>{{ message.title }}</h4>
    <p>{{ message.text }}</p>
    <p>{{ message.timestamp }}</p>
</div>
  </div>
</template>

<script>
import firebase from 'firebase';

  var config = {
    apiKey: "IN THE CODE I HAVE A WORKING API KEY",
    authDomain: "vuemymessage.firebaseapp.com",
    databaseURL: "https://vuemymessage.firebaseio.com",
    projectId: "vuemymessage",
    storageBucket: "vuemymessage.appspot.com",
    messagingSenderId: "204332593971",
    timestampsInSnapshots: true
  };
  let app = firebase.initializeApp(config);

  let db = firebase.firestore();

  export default {
    name: "App",
    data(){
      return {
        messages: []
      }
    },
    firestore(){
      return {
        messages: db.collection('messages')
      }
    },
  }
</script>

<style>
#app {
}
</style>

这将导致

{{message.title}}
{{message.text}

{{message.timestamp}

从“firebase”导入firebase；
变量配置={
apiKey：“在代码中，我有一个可用的API密钥”，
authDomain:“vuemymessage.firebaseapp.com”，
数据库URL:“https://vuemymessage.firebaseio.com",
projectId:“vuemymessage”，
storageBucket:“vuemymessage.appspot.com”，
messagingSenderId：“204332593971”，
时间戳：对
};
让app=firebase.initializeApp（配置）；
设db=firebase.firestore（）；
导出默认值{
名称：“应用程序”，
数据（）{
返回{
信息：[]
}
},
firestore（）{
返回{
消息：db.collection（'messages'）
}
},
}
#应用程序{
}

您试图在组件上设置firebase，老实说，我不确定这是否是它失败的原因，但我从未见过这样的情况

我总是这样做

//firebase.js

import * as firebase from 'firebase'
import 'firebase/firestore'

import config from './.firebaseconfig'

firebase.initializeApp(config)

const db = firebase.firestore()
export const rooms = db.collection('rooms')
export const sortedRoomsByCreatedDate = db.collection('rooms').orderBy('createdAt')

请注意，您缺少导入“firebase/firestore”的

行，这可能是问题所在。不过，我强烈建议您在自己的文件中初始化firebase，并将所有引用放在一个位置

当然，my main.js已经导入到上面的文件
import./firebase'

这就是我在组件上使用引用的方式

<script>
import firebase from 'firebase'
import { sortedRoomsByCreatedDate } from '../firebase'

export default {
  data () {
    return {
      sortedRoomsByCreatedDate: []
    }
  },
  firestore () {
    return {
      sortedRoomsByCreatedDate
    }
  }
}
</script>


从“firebase”导入firebase
从“../firebase”导入{sortedRoomsByCreatedDate}
导出默认值{
数据（）{
返回{
SortedRoomByCreatedDate:[]
}
},
消防仓库（）{
返回{
SorterDroomsByCreatedDate
}
}
}

让我知道这是否适用于您，如果不适用，请让我知道，以便我们可以解决这一问题
如果您将所有配置和初始化app（）放在main.js中的“新Vue”中创建的函数中会怎么样？或者，您可能需要从“firebase”导入作为firebase的