Question

我是vue.js的新手，我正在通过互联网上的文档和教程学习vue.js，现在我尝试使用Firebase和vue.js制作应用程序，但是当我运行时它，错误说：

-firebase未定义

但是，我很确定我导入了它。这是我的代码：

main.js：

import Vue from 'vue'
import App from './App'
import router from './router'
import * as firebase from "firebase"

var config = {
 apiKey: "###########",
 authDomain: "###########",
 databaseURL: "###########",
 projectId: "###########",
 storageBucket: "###########",
 messagingSenderId: "###########"
};
 firebase.initializeApp(config);
 Vue.config.productionTip = false
 /* eslint-disable no-new */
 new Vue({
  el: '#app',
  router,
  firebase,
  components: { App },
  template: '<App/>'
 })

我的组件注册：

<template>
<div class="login">
    <h3>Lets Register</h3>
    <input type="email" v-model="email">
    <input type="password" v-model="password">
    <button v-on:click="register">Submit</button>
    <p><router-link to="/Login"> Login? </router-link></p>
</div>

<script>
     export default {
     name: 'Register',
     data () {
        return{
            email: '',
            password: ''
        }
      },
     methods:{
        register : function(){
            firebase.auth().createUserWithEmailAndPassword(this.email,this.password).then(
                function (user) {
                    alert('Account been created')
            },
            function(err){
                alert('opps'+ err.message)
            }
                );
            }
        }
    }

任何帮助将不胜感激。

Answer 1

您的组件确实未定义，我也遇到过这个问题。怎么解决？模块。

创建一个名为firebase.service.js的Js文件，在这个文件中你定义了使用firebase的每个函数，你也可以在这个文件中配置firebase，然后你将导出函数到其他文件，您将导入和使用它们，就像这样：

<强> firebase.service.js

import * as firebase from 'firebase'

var config = { // put here your credentials
  apiKey: apiKey,
  authDomain: authDomain,
  databaseURL: databaseURL,
  projectId: projectId,
  storageBucket: storageBucket,
  messagingSenderId: messagingSenderId
}

firebase.initializeApp(config)

var auth = firebase.auth()
var db = firebase.database()

export function signOut (callback) {
  auth.signOut().then(value => {
    callback()
  }, err => { callback(err) })
}

<强>零件

<script>
    import { signOut } from './firebase.services'

    // use it here

</script>

你不能导出firebase本身，因为它会抛出一个错误，说明firebase已经初始化了。

Answer 2

您应该在要使用它的每个组件中导入firebase。看起来您现在正在另一个文件中导入firebase，所以只需将导入添加到组件中。

Answer 3

在main.js中，只需使用Vue.use(firebase)将firebase注册为全局，所有组件都可以访问。

import firebase from 'firebase'
Vue.use(firebase) 

var config = {
 apiKey: "####",
 authDomain: "####",
 databaseURL: "####",
 projectId: "####",
 storageBucket: "####",
 messagingSenderId: "####"
};
firebase.initializeApp(config);

new Vue({
 el: '#app',
 render: h => h(App),
 router : router,
 firebase: firebase,
})

在您的组件中不要忘了像这样导入：

import firebase from 'firebase'

Answer 4

只需添加一些其他信息，以防有人觉得有用。首先，仅加载所需的firebase组件。加布里埃尔·卡内罗的回应确实是以下原因的基础

您的firebase.js，您可以在其中初始化和导出方法，模块等

/*this will import all the firebase which can be a bottleneck */
// import * as firebase from 'firebase'

/*better only importing what you need*/
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/functions';

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

/*OptionalPrjName is optional that you can initialize your firebase with 
it in case you are using more than one project or config file  , 
it's optional as firebase can initialize without this name*/
firebase.initializeApp(config, "OptionalPrjName");
const auth = firebase.auth(firebase.app("OptionalPrjName"));
const firestore = firebase.firestore(firebase.app("OptionalPrjName"));
const functions = firebase.functions(firebase.app("OptionalPrjName"));

/*create modules ; say one for sign up , etc , another for functions, etc ... */
const app_firebase = {
    signout: () => console.log(`firebase is` , firebase),
    test: () => console.log(`testing`),
}

/*export them here so you can import them individually where you need in your components */
export {
    app_firebase,
}

/*another way of only exporting your functions, etc. I like the above better becuase it helps bundling similar 
functionalities together under a name space ; make sure you don't create confusion by assigning similar naming 
so I always add something like app_ to my names in the above exports*/
export function fire_auth(callback) {
    console.log(`firebase `, auth, firestore, functions);
}

您的组件，您只能在其中导入需要使用的组件（让我们称之为组件signup.vue），并说我们已经放置在目录的根目录中，因此我们可以在../firebase之类的视图中访问它：< / p>

<template>
    <div class="signup">
        <h2>signup</h2>
        <button type="button" @click="signup">Sign Up</button>
        <router-link to="/login">Login</router-link>
    </div>
</template>
<script>

import { fire_auth, app_firebase } from '../firebase';

export default {
    name: 'signup',
    data() {
        return {}
    },
    methods: {
        signup: function() {
            fire_auth();
            app_firebase.test();
        }
    }
}
</script>
<style scoped>
/* scoped attr limits style to this component only */
</style>

firebase未定义Vue.js

4 个答案: