Vuefire firestore()函数未运行以绑定我的数据

Question

我遇到了一个我无法解决的问题。我让VueFire在我写的另一个应用上工作，但由于某种原因，它在我现在的应用中没有绑定。下面是调用firestore()函数的页面上的代码，以及main.js (如果它有助于查看初始化)。为什么firestore()没有运行？

页面调用firestore()：

HTML

<table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="user in users">
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
      </tr>
    </tbody>
  </table>

JS

import firebase from 'firebase'

export default {
  data() {
    return {
      users: [],
    }
  },
  firestore() {
    return {
      users: firebase.firestore().collection('users'),
    }
  }
}

和main.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import App from './App'
import router from './router'
import firebase from 'firebase'
import 'vuetify/dist/vuetify.min.css'
import VueFire from 'vuefire'

Vue.config.productionTip = false

Vue.use(Vuetify)
Vue.use(VueFire)

var config = {
    boiler plate initialization copied from Firebase console
 };

const firebaseApp = firebase.initializeApp(config);
firebaseApp.firestore().settings({ timestampsInSnapshots: true })

/* eslint-disable no-new */
const unsubscribe = firebase.auth().onAuthStateChanged(user => {
  new Vue({
   el: '#app',
   router,
   render: h => h(App)
 })
 unsubscribe() 
})

谢谢你！！

Answer 1

尝尝这个。

import { db } from "../main";

export default {
  data() {
    return {
      users: [],
    }
  },
  firestore() {
    return {
      users: db.firestore().collection('users'),
    }
  }
}

和main.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import App from './App'
import router from './router'
import 'vuetify/dist/vuetify.min.css'
import firebase from "firebase";
import VueFire from 'vuefire'
import "firebase/firestore";

Vue.config.productionTip = false

Vue.use(Vuetify)
Vue.use(VueFire)

var config = {
    boiler plate initialization copied from Firebase console
 };

firebase.initializeApp(config);

export const db = firebase.firestore();
const settings = { timestampsInSnapshots: true };
db.settings(settings);

/* eslint-disable no-new */
const unsubscribe = firebase.auth().onAuthStateChanged(user => {
  new Vue({
   el: '#app',
   router,
   render: h => h(App)
 })
 unsubscribe() 
})