Estoy tratando de desarrollar un calendario que contenga tareas. Estoy tratando de usar Firebase, pero sigue dando un error que dice que no comprende la propiedad 'colección ()'. Ya investigué muchas cosas, intenté hacerlo de otras maneras, pero no obtuve nada. Puedo registrarme si hago lo contrario, pero leyendo los datos con la 'colección', no. Detalle estoy usando la versión 9 de firebase

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

No se que mas hacer, alguien me puede ayudar por favor? El guión completo está abajo.

Texto

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

Principal

 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();