Vue.js + Firestore无法读取未定义的属性'collection'>>

Question

最近我一直在玩Vue.js和Firestore，我发现了一个很棒的插件可以使我的生活更轻松，尽管它确实涉及到链接到我的Firestore数据库的代码较少，但是这使我的生活变得非常美好遇到undefined错误非常困难。

我所拥有的非常简单：

App.vue：

<template>
  <div id="app">
    <Projects></Projects>
  </div>
</template>

<script>

import Projects from './Projects';
export default {
  name: 'app',

  components: {
    Projects
  },
  data() {
    return {}
  }
}
</script>
<style></style>

Projects.vue：

<template>
  <div id="projects">
    <h1>Hi</h1>
    <p v-for="project in projects" :key="project.project_id">{{ project.title }}</p>
  </div>
</template>

<script>

import db from './main'

export default {
  name: 'projects',
  data() {
    return {
      projects: [],
    }
  },
  async mounted() {
    this.projects = await db.collection('projects').get()
  }
}
</script>
<style></style>
Main.js：

import 'babel-polyfill';
import Vue from 'vue'
import App from './App.vue'

// Firebase Imports
import Firebase from 'firebase/app'
import 'firebase/firestore'
import { firestorePlugin } from 'vuefire'

// Use Plugins
Vue.use(firestorePlugin)

// Initialize Firebase Configuration
var firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxx.firebaseapp.com",
  databaseURL: "https://xxxxxxxxxxxx.firebaseio.com",
  projectId: "xxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxx.appspot.com",
  messagingSenderId: "xxxxxxxxxxxx",
  appId: "xxxxxxxxxxxx"
}

const firebaseApp = Firebase.initializeApp(firebaseConfig)
export const db = firebaseApp.firestore()

new Vue({
  el: '#app',
  render: h => h(App)
})

运行该应用程序时，我的控制台出现以下错误：

[Vue warn]: Error in mounted hook (Promise/async): "TypeError: Cannot read property 'collection' of undefined"

found in

---> <Projects> at src/Projects.vue
       <App> at src/App.vue
         <Root>
vue.esm.js?efeb:1897 TypeError: Cannot read property 'collection' of undefined
    at VueComponent._callee$ (Projects.vue?8816:19)
    at tryCatch (runtime.js?a466:65)
    at Generator.invoke [as _invoke] (runtime.js?a466:303)
    at Generator.prototype.<computed> [as next] (runtime.js?a466:117)
    at step (146:2)
    at eval (146:2)
    at new Promise (<anonymous>)
    at eval (146:2)
    at VueComponent.mounted (Projects.vue?8816:18)
    at invokeWithErrorHandling (vue.esm.js?efeb:1863)
[如果有人有经验，可以阐明为什么我是我的代码中的大人物，那将非常感谢！

最近我一直在使用Vue.js和Firestore，并且我发现了一个很棒的插件可以使我的生活更轻松，尽管它确实涉及到链接到我的Firestore数据库的代码较少，但它一直使我的生活变得更加轻松...] >

Answer 1

在main.js文件中，您应该执行以下操作：

Firebase.initializeApp(firebaseConfig)
export const db = firebase.firestore()