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

Question

我遇到了这个我无法弄清楚的问题。我让 VueFire 在我编写的另一个应用程序上工作，但出于某种原因，它在我当前的应用程序中没有绑定(bind)。下面是页面上调用 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() 
})