在Vue.js + Firebase中设置项目的更好方法是什么?

Question

我在Vue.js + Firebase做我的第一个项目。所以出现了这个错误Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)

当我使用Firestore时，进入一个组件。

在<<p> strong> main.js 我有

import firebase from 'firebase/app'
Vue.config.productionTip = false
const firebaseConfig = {
apiKey: "********",
authDomain: "*******",
projectId: "*******",
storageBucket: "*********",
messagingSenderId: "*********",
appId: "*********",
measurementId: "********"
};
firebase.initializeApp(firebaseConfig);

所以在dashboard。vue中

import firebase from "firebase/app";
import "firebase/firestore";
const db = firebase.firestore();

其他视图中的，如Login。vue Register.vue

我用

import firebase from "firebase/app";
import "firebase/auth";

在这些视图中工作!

谢谢! !

Answer 1

假设您使用的是Vue CLI应用程序，我总是在created()中初始化Firebase，如下所示:

<script>
import firebase from "firebase/app"
import "firebase/auth"
import fbConfig from "@/creds/fbConfig.json";
export default {
name: "ComponentName",
data: () => ({ }),
created() {
if (!firebase.apps.length) {
firebase.initializeApp(fbConfig)
}
firebase.auth().onAuthStateChanged((user) => {
if (user) {
console.log("User is logged in!")
}
})
}
}
</script>

但是要确保在每个父组件上都写了这段代码!如果它是一个子组件，比如模态或页面的一部分，你不需要初始化应用。