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

Posted 2023-02-16

【中文标题】VueJS Firebase 应用程序导出默认错误的问题

【英文标题】：VueJS Firebase app problem of export default error

【发布时间】：2021-08-07 02:51:00

【问题描述】：

我正在尝试使用最新的 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)
    
      constuser = 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”） 因为没有用户注册，也没有创建文档 有人知道怎么做吗？

【参考方案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。

【讨论】：

感谢您分享这个，这确实有效！