TypeError: 정의되지 않은('collection' 읽기) 속성을 읽을 수 없음 - Vuejs 및 Firebase

TypeError: 정의되지 않은('collection' 읽기) 속성을 읽을 수 없음 - Vuejs 및 Firebase

작업이 포함된 달력을 개발하려고 합니다.Firebase를 사용하려고 하는데 collection() 속성을 이해하지 못한다는 오류가 계속 나타납니다.나는 이미 많은 것을 조사했고 다른 방법으로 시도했지만 아무것도 얻지 못했다.그렇지 않으면 등록할 수 있지만, '수집'을 사용하여 데이터를 읽는 것은 아닙니다.세부 정보 방화벽 기반 버전 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();

1. DbStore를 가져올지 확인합니다.

2. 사용하다

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

데이터가 올바르게 바인딩되지 않을 수 있으므로 문제가 백엔드인지 프론트엔드인지에 대한 문제 슈팅이 필요합니다.웹 사이트의 구조를 만들기 전에 데이터를 올바르게 얻지 못할 수 있습니다.데이터와 데이터베이스를 모두 올바르게 가져와 구축 및 프런트 엔드에 바인딩할 수 있어야 합니다.

예를 들어, 나는 먼저 모의 데이터를 사용하여, 예를 들어, json을 반환하고, 앱이 그것을 수신하고 있는지, 또는 네트워크 요청이 응답을 받았는지를 검증하고, 응답이 200이면, 그리고 나서, 어떻게 앱에 수신되고 있는지를 검증합니다.

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

비어 있지 않으면 실제 데이터를 사용해 보십시오.또한 비어 있지 않으면 데이터가 올바르게 바인딩된 것입니다.

또한 스크립트의 일부 데이터를 하드코드하여 다음과 같이 문제가 프런트 엔드에서 발생하는지 확인할 수 있습니다.

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

또한 Vuefire를 사용하여 데이터를 바인드할 수 있습니다.이것에 의해, Firebase를 VueJ에 보다 효율적으로 통합할 수 있습니다.Vuefire를 사용하여 Firestore에서 데이터를 바인딩하는 방법에 대해 이 유용한 가이드를 참조하십시오.시작하려면 페이지에 Vue, Firebase 및 Vue Fire 라이브러리를 포함하십시오.

<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>

Vue Fire는 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);

언급URL : https://stackoverflow.com/questions/69288139/typeerror-cannot-read-properties-of-undefined-reading-collection-vuejs-an