Ошибка инициализации Firebase в проекте VueJS

Question

впервые публикуется здесь.Также довольно плохо знаком с VueJS, знаю немного Angular.

Я столкнулся с ошибкой при инициализации Firebase (впервые получаю эту ошибку) в моем проекте VueJS:

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

• Я включил <script src="https://www.gstatic.com/firebasejs/5.5.5/firebase.js"></script> в index.html

• Я также установил firebase (последняя версия) через npm с --save

И создал 2 файла : firebaseInit.js и firebaseConfig.js (который содержит ключ api и т. Д. Для веб-приложения):

In firebaseInit.js :

import firebase from 'firebase';
import 'firebase/firestore';
import firebaseConfig from './firebaseConfig';

const firebaseApp= 
firebase.initializeApp(firebaseConfig);

export default firebaseApp.firestore();

и введите:

export default { the config key value pairs obtained 
from Firebase console } 

в firebaseConfig.js.

Дополнительная информация (хотя я не думаю, что это является источником проблемы):

Я импортировал firebase с import firebase as 'firebase' в файле vue. Я использовал firebase auth() и createUserWithEmailandPassword() в свойстве методов , но alert() не работает.

import firebase from 'firebase';

export default {
  name: 'register',
  data: function() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
    register: function(e) {
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then(
          user => {
            alert(`Account made for ${user.email}`);
            this.$router.push('/');
          },
          err => {
            console.log(err.message);
          }
        );

      e.preventDefault();
    }
  }
};

Answer 1

Вы создали firebaseInit.js, но так как вы никогда не импортируете или не требуете его, он никогда не выполняется, что приводит к ошибке «firebase not initialized», когда вы пытаетесь использовать вместо него firebase, импортированный из универсального модуля firebase.

Используйте export default firebaseApp в вашем firebaseInit.js (а не в пожарном депо, как сейчас), а затем, например, import firebase from 'path/to/firebaseInit.js'.

Answer 2

Не уверен, что именно проблема с вами.Иногда нам нужно дождаться завершения работы базы данных, прежде чем выполнять некоторые задачи.Приведенный ниже учебник объясняет один такой сценарий.Пожалуйста, обращайтесь к нему, особенно к концу, где выполняются некоторые проверки.

Здесь - учебное пособие для использования аутентификации с помощью firebase с vuejs.См. Также этот краткий учебник.Это поможет вам быстро начать работу.

Пожалуйста, примите ответ, если это поможет.

Спасибо.

Этот наблюдатель вызван onAuthStateChanged.(вы можете узнать больше о наблюдателе в документации Firebase: https://firebase.google.com/docs/auth/web/manage-users#get_a_users_profile)

Итак, установив обратный вызов для наблюдателя onAuthStateChanged, мы можем инициализировать приложение Vue только тогда, когда мы уверены, что Firebase инициализирована.