VueJS Firebase 应用程序导出默认错误的问题

Question

我正在尝试使用最新的 vue 2 和 firebase 创建 crud 应用程序，& 这是我的 firebase.js 文件

import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'


const firebaseConfig = {
   stuff
  };

firebase.initializeApp(firebaseConfig);
const database = firebase.firestore()
const auth = firebase.auth()

const usersCollection = database.collection('users')

export{
 
    database,
    auth,
    usersCollection
}

这是我的 store/index.js 文件

import Vue from "vue";
import Vuex from "vuex";
import fb from "../../firebase"

import router from "../router";
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
   userProfile:{}
  },
  
  mutations: {
   
    setUserProfile(state,val)
    {
      state.userProfile=val
    },
    setPerformingRequest(state,val)
   {
     state.performingRequest=val
   }
  },
  actions: {

    async login({dispatch},form)
    {
      const{user} = await fb.auth().signInWithEmailAndPassword(form.email,form.password)
      dispatch('fetchUserProfile',user)
    },


    async signUp({dispatch},form)
    {

       const {user} = await fb.auth().createUserWithEmailAndPassword(form.email,form.password)

      //  create user object in userCollection

      await fb.usersCollection.doc(user.uid).set({
        firstName:form.firstName,
        middleName:form.middleName,
        lastName:form.lastName,
        email:form.email,
        password:form.password,
        gender:form.gender,
        age:form.user_age
      })

      dispatch('fetchUserProfile',user)

    },

    async fetchUserProfile({commit},user)
    {
      // fetching user profile data into constant named userProfile
      const userProfile = await fb.usersCollection.doc(user.uid).get()

      // setting the fetched data from firebase to state of userProfile
      commit('setUserProfile',userProfile.data())

      // now changing route to dashboard

      if(router.currentRoute.path ==='/')
      {
        router.push('/Dashboard')
      }

    },
  
    async logOut({commit})
    {
          
      // log user out
      await fb.auth.signOut()

      //  clear user data from state

      commit('setUserProfile',{})

      // changing route to homepage
      router.push('/')
    }



  },
  modules: {},
});

应用程序在浏览器控制台中运行时出现警告未捕获（承诺中）类型错误：firebase__WEBPACK_IMPORTED_MODULE_4_.default 未定义并且在 vs 代码终端中
"在“../../firebase”中找不到导出“默认”（导入为“fb”）
因为没有用户注册，也没有创建文档
有人知道怎么做吗？

Answer 1

改成

const fb = require('../../firebase.js');

或到

import { auth, usersCollection } from "../../firebase";   

在商店文件中应该可以解决问题。

---

第一种情况，你也需要改变

await fb.auth().createUserWithEmailAndPassword

到

await fb.auth.createUserWithEmailAndPassword

---

第二种情况，改

await fb.auth().createUserWithEmailAndPassword

到

await auth.createUserWithEmailAndPassword

在这种情况下，还请注意，如果您要在 store/index.js 文件中使用 database，您还需要导入 database，例如：

import { database, auth, usersCollection } from "../../firebase"; 

---

更多解释here和here。