TypeError：无法读取未定义的属性（读取“集合”）-Vuejs 和 Firebase

Question

我正在尝试开发一个包含任务的日历。 我正在尝试使用 firebase，但它一直给出一个错误，说它不理解“collection()”属性。 我已经研究了很多东西，试图用其他方式来做，但我什么也没得到。 如果我不这样做，我可以注册，但是用“集合”读取数据，不。 详情我使用的是 firebase 版本 9

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'collection')

我不知道还能做什么，有人可以帮我吗？ 整个脚本如下。

脚本

export default {
  data: () => ({
    today: new Date().toISOString().substr(0, 10),
    focus: new Date().toISOString().substr(0, 10),
    type: 'month',
    typeToLabel: {
      month: 'Month',
      week: 'Week',
      day: 'Day',
      '4day': '4 Days',
    },
    name: null,
    details: null,
    start: null,
    end: null,
    color: '#1976D2', // default event color
    currentlyEditing: null,
    selectedEvent: {},
    selectedElement: null,
    selectedOpen: false,
    events: [],
    dialog: false
  }),
  mounted () {
    this.getEvents()
  },
  computed: {
    title () {
      const { start, end } = this
      if (!start || !end) {
        return ''
      }
      const startMonth = this.monthFormatter(start)
      const endMonth = this.monthFormatter(end)
      const suffixMonth = startMonth === endMonth ? '' : endMonth
      const startYear = start.year
      const endYear = end.year
      const suffixYear = startYear === endYear ? '' : endYear
      const startDay = start.day + this.nth(start.day)
      const endDay = end.day + this.nth(end.day)
      switch (this.type) {
        case 'month':
        return `${startMonth} ${startYear}`
        case 'week':
        case '4day':
        return `${startMonth} ${startDay} ${startYear} - ${suffixMonth} ${endDay} ${suffixYear}`
        case 'day':
        return `${startMonth} ${startDay} ${startYear}`
      }
      return ''
    },
    monthFormatter () {
      return this.$refs.calendar.getFormatter({
        timeZone: 'UTC', month: 'long',
      })
    }
  },
  methods: {
    async getEvents () {
      let snapshot = await dbStore.collection('calEvent').get()
      const events = []
      snapshot.forEach(doc => {
        let appData = doc.data()
        appData.id = doc.id
        events.push(appData)
      })
      this.events = events
    },
    setDialogDate( { date }) {
      this.dialogDate = true
      this.focus = date
    },
    viewDay ({ date }) {
      this.focus = date
      this.type = 'day'
    },
    getEventColor (event) {
      return event.color
    },
    setToday () {
      this.focus = this.today
    },
    prev () {
      this.$refs.calendar.prev()
    },
    next () {
      this.$refs.calendar.next()
    },
    async addEvent () {
      if (this.name && this.start && this.end) {
        await dbStore.collection('calEvent').add({
          name: this.name,
          details: this.details,
          start: this.start,
          end: this.end,
          color: this.color
        })
        this.getEvents()
        this.name = '',
        this.details = '',
        this.start = '',
        this.end = '',
        this.color = ''
      } else {
        alert('You must enter event name, start, and end time')
      }
    },
    editEvent (ev) {
      this.currentlyEditing = ev.id
    },
    async updateEvent (ev) {
      await dbStore.collection('calEvent').doc(this.currentlyEditing).update({
        details: ev.details
      })
      this.selectedOpen = false
      this.currentlyEditing = null
      this.getEvents()
    },
    async deleteEvent (ev) {
      await dbStore.collection('calEvent').doc(ev).delete()
      this.selectedOpen = false
      this.getEvents()
    },
    showEvent ({ nativeEvent, event }) {
      const open = () => {
        this.selectedEvent = event
        this.selectedElement = nativeEvent.target
        setTimeout(() => this.selectedOpen = true, 10)
      }
      if (this.selectedOpen) {
        this.selectedOpen = false
        setTimeout(open, 10)
      } else {
        open()
      }
      nativeEvent.stopPropagation()
    },
    updateRange ({ start, end }) {
      this.start = start
      this.end = end
    },
    nth (d) {
      return d > 3 && d < 21
      ? 'th'
      : ['th', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th'][d % 10]
    }
  }
}

主要的

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'

// Firebase
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';

//I have initialized my project with valid values but commented the keys to avoid publishing them online.
firebase.initializeApp({
  apiKey: "<my_api_key>", 
  authDomain: "<my_project_domain>",
  projectId: "<my_project_id>",
  databaseURL: "",
  storageBucket: "<my_project_storage_bucket>",
  messagingSenderId: "<my_messaging_sender_id>",
  appId: "<my_app_id>",
  measurementId: "<my_measurement_id>"
});

Vue.config.productionTip = false

new Vue({
  router,
  vuetify,
  render: h => h(App)
}).$mount('#app')


export const dbStore = firebase.firestore();

Answer 1

1. 检查您是否正在导入 DbStore

2. 利用

   this.dbStore.collection('calEvent').get().then((res)=>{ const events = res.docs; })

Answer 2

您可能没有正确绑定数据，因此您需要排查问题出在后端还是前端。 看起来你在做网站结构之前可能没有正确获取数据，你需要正确获取所有数据和数据库，然后才能开始构建并将其绑定到前端。

我将首先尝试使用模拟数据，例如，返回 json 并验证应用程序是否正在接收它或者网络请求是否得到响应，如果响应是 200，然后验证如何接收到应用程序

<pre>{{ yourObject }}</pre>

如果它不为空，则尝试使用真实数据。 如果它也不为空，则您的数据已正确绑定。

您还可以在脚本中对一些数据进行硬编码，以查看问题是否来自前端，如下所示：

data: () => ({
    today: 14/02/2021
    focus: 14/01/2021
    type: 'month',
  }),

您也可以尝试使用 Vuefire 绑定您的数据，这将帮助您以更好的方式将 Firebase 合并到 VueJS。 您可以按照这个非常有用的指南来了解如何使用 Vuefire 绑定来自 Firestore 的数据。 要开始使用，只需在页面中包含 Vue、Firebase 和 VueFire 库：

<head>
  <!-- Vue -->
  <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
  <!-- Firebase -->
  <script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
  <!-- VueFire -->
  <script src="https://cdn.jsdelivr.net/vuefire/1.0.0/vuefire.min.js"></script>
</head>

VueFire 将自动检测 Vue 的存在并自行安装。 如果您使用的是模块捆绑器，您还可以通过 NPM 安装依赖项：

npm install vue firebase vuefire --save

var Vue = require("vue");
var VueFire = require("vuefire");
var Firebase = require("firebase");

// explicit installation is required in a module environment
Vue.use(VueFire);