Vue. js + Firestore Невозможно прочитать свойство 'collection' из неопределенного - PullRequest
Новая
       102

Vue. js + Firestore Невозможно прочитать свойство 'collection' из неопределенного

0 голосов
/ 24 марта 2020

В последнее время я играл с Vue.js и Firestore, и я нашел потрясающий плагин, который облегчит мою жизнь, и хотя он требует меньше кода для ссылки на мою базу данных пожарного магазина, он делает мою жизнь очень сложно с undefined ошибками.

То, что у меня есть, очень просто:

Приложение. 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>

Проекты. 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: [],
    }
  },
  firestore: {
    projects: db.collection('projects')
  }
}
</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)
})

Когда я запускаю это приложение, в моей консоли появляется следующая ошибка: 

Uncaught TypeError: Cannot read property 'collection' of undefined
    at eval (Projects.vue?8816:20)
    at Object.<anonymous> (build.js:1640)
    at __webpack_require__ (build.js:679)
    at fn (build.js:89)
    at eval (Projects.vue?eb12:1)
    at Object.<anonymous> (build.js:3128)
    at __webpack_require__ (build.js:679)
    at fn (build.js:89)
    at eval (145:1)
    at Object.<anonymous> (build.js:1633)

Если у кого-то есть опыт работы с это и может пролить некоторый свет на то, почему я большой дурачок в своем коде, это было бы очень признательно!

1 Ответ

0 голосов
/ 25 марта 2020

Итак, немного поиграв с кодом, я наконец исправил его, а также избавился от других предупреждений в процессе.

Обновлена ​​инициализация vuefire: 

Vue.use(firestorePlugin)
firebase.initializeApp({
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxx.firebaseapp.com",
  databaseURL: "https://xxxxxxxxxxxx.firebaseio.com",
  projectId: "xxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxx.appspot.com",
  messagingSenderId: "xxxxxxxxxxxx",
  appId: "xxxxxxxxxxxx"
});

export const db = firebase.firestore()

Обновлены проекты . vue: 

import { db } from './main'

export default {
  name: 'projects',
  data() {
    return {
      projects: [],
    }
  },
  firestore() {
    return {
      projects: db.collection('projects')
    }
  }
}

Небольшие изменения тут и там в конечном итоге решили мою проблему, надеюсь, это поможет другим, кто сталкивается с этой проблемой:)

...