import firebase.firestore () возвращает неопределенное - PullRequest
Новая
       100

import firebase.firestore () возвращает неопределенное

0 голосов
/ 29 июня 2019

У меня есть приложение vue с установленным vuefire.Следуя документации здесь: https://vuefire.vuejs.org/vuefire/getting-started.html#plugin, У меня есть файл main.js: 

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { firestorePlugin } from 'vuefire'

Vue.config.productionTip = false;

Vue.use(firestorePlugin);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

и файл firebase.js, например: 

import firebase from "firebase";

const config = {
    apiKey: "XXXXXX",
    authDomain: "XXXXX",
    databaseURL: "XXXXX",
    projectId: "XXXXXXX",
    storageBucket: "XXXXXX",
    messagingSenderId: "XXXXXXX",
    appId: "XXXXX"
};

firebase.initializeApp(config);

export const db = firebase.firestore();

И вотдомашний компонент 

<template>
  <div>
    <button @click="signIn">Log in with google</button>
  </div>
</template>

<script>
import firebase from "firebase";
import db from "@/firebase"
export default {
  methods: {
    signIn() {
      const provider = new firebase.auth.GoogleAuthProvider();
      firebase
        .auth()
        .signInWithPopup(provider)
        .then(result => {
          const malakas = {
            userId: result.user.uid,
            email: result.user.email,
            displayName: result.user.displayName,
            photoURL: result.user.photoURL
          };

          db.collection("malakes")
            .doc(result.user.uid)
            .set(spreadOparatorTest, { merge: true });

        })
        .catch(err => console.log(err));
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

странно то, что в db.collection(...) я получаю:

TypeError: Невозможно прочитать свойство 'collection' из неопределенного

потому что БД, которую я импортирую, импортируется как неопределенная.Но если я изменю db.collection(...) на firebase.firestore().collection(...), он будет работать нормально, но я не понимаю, почему.

Ответы [ 2 ]

2 голосов
/ 29 июня 2019

проблема в том, что вам нужно импортировать несколько зависимостей по отдельности ... это хороший безопасный способ: 

import firebase from "firebase/app";
require('firebase/firestore')
require('firebase/auth')

const config = {
    apiKey: "XXXXXX",
    authDomain: "XXXXX",
    databaseURL: "XXXXX",
    projectId: "XXXXXXX",
    storageBucket: "XXXXXX",
    messagingSenderId: "XXXXXXX",
    appId: "XXXXX"
};

firebase.initializeApp(config);

export const db = firebase.firestore();

export const auth = firebase.auth();

тогда ваши компоненты могут импортировать их следующим образом: 

import firebase from 'firebase/app'
import { db, auth } from "./firebase" // <--- or wherever the config file is
export default {
  methods: {
    signIn() {
      const provider = new firebase.auth.GoogleAuthProvider();
       auth
        .signInWithPopup(provider)
        .then(result => {
          const malakas = {
            userId: result.user.uid,
            email: result.user.email,
            displayName: result.user.displayName,
            photoURL: result.user.photoURL
          };

          db.collection("malakes")
            .doc(result.user.uid)
            .set(spreadOparatorTest, { merge: true });

        })
        .catch(err => console.log(err));
    }
  }
};

Надеюсь, это поможет!

0 голосов
/ 29 июня 2019

дБ не определено, единственная причина, по которой я вижу, в том, что что-то не так в импорте ... попробуйте добавить такие скобки, как это import { db } from "@/firebase", если это не сработало, тогда вам следует снова проверить имена файлов

...