Javascript 如何将文件从表单添加到 Firebase 数据库 Vue js + Vuetify + Firebase

这是我第一次同时使用Vuetify和Firebase.

在一个教程之后，我试图在firebase中将一些数据添加到我的数据库中(而不是图像).

在使用npm在我的项目中安装firebase之后，我在一个单独的js文件中设置了它，如下所示:

import { initializeApp } from "firebase/app";
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
import { getAnalytics } from "firebase/analytics";

const firebaseConfig = {
  apiKey: "....",
  ...
  ...
};


const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore(app);

在vue中.js文件，其中有我想要添加的数据的新对象的表单，我try 这样做:

模板:

<template>
    <v-dialog max-width="600px">
        <v-btn flat slot="activator" class="success">
            Add new project
        </v-btn>
        <v-card>
            <v-card-title>
                <h1 class="display-1">Add a new project</h1>
            </v-card-title>
                <v-form class="px-3" ref="newProjectForm">
                    <v-card-text>
                        <v-text-field label="Title" v-model="title" prepend-icon="folder" :rules="inputRules"></v-text-field>
                        <v-textarea  :rules="inputRules" label="Information" v-model="content" prepend-icon="edit"></v-textarea>

                    <v-menu>
                        <v-text-field :rules="inputRules" slot="activator" :value="formattedDate" label="Due date" prepend-icon="date_range"></v-text-field>
                        <v-date-picker v-model="due"></v-date-picker>
                    </v-menu>

                    <v-spacer></v-spacer>
                    
                    <v-btn flat class="success mx-0 mt-3" @click="submit">Add project</v-btn>
                    </v-card-text>
                </v-form>
        </v-card>
    </v-dialog>
</template>

脚本:

import format from 'date-fns/format'

import parseISO from 'date-fns/parseISO'

import db from '@/fb'

export default {
    data(){
        return{
            title : "",
            content : "",
            due : null,
            inputRules: [
                v => v.length >= 4 || "Minimum length is 3 characters ",
            ]
        }
    },
    methods:{
        submit(){
            if(this.$refs.newProjectForm.validate()){
                // console.log(this.title,this.content,this.due);
                const project = {
                    title: this.title,
                    content: this.content,
                    due: format(parseISO(this.due), 'eee do MMMM y'),
                    person :'myself',
                    status: 'ongoing'
                }

                db.collection('Listify').add(project).then(() => console.log('added to db'))
            }
        }
    },
 computed: {
    formattedDate () {
      console.log(this.due)
      return this.due ? format(parseISO(this.due), 'eee do MMMM y') : ''
    }
  }}
</script>

记录的错误是"TypeError:无法读取未定义的属性(读取"集合")

我知道我可能是以错误的方式导入了一些东西，但我对这个非常陌生，我还没有很好地掌握它.

我想将表单中的对象上传到Firebase db，你能解释一下如何使用fire base，以及我缺少了什么吗？

另外，我的npm版本是8.3.1(我无法在atm上更新)，这是个问题吗？

更新:

Frank van Puffelen提供的解决方案有效，但只要firebase设置在一个外部js文件中，只要我粘贴了调用submit方法的文件中的所有内容，我仍然无法让它工作，它工作了！

谢谢大家