在 Nuxt.js 应用中初始化 Firebase 的地方

Posted 2023-02-22

【中文标题】在 Nuxt.js 应用中初始化 Firebase 的地方

【英文标题】：Place to initialize Firebase in Nuxt.js app

【发布时间】：2018-10-07 10:55:33

【问题描述】：

我正在用Nuxt.js 和Firebase 编写一个网络应用程序。我需要在哪个文件中初始化Firebase？也就是说，这段代码sn-p放在哪里？

var config = 
    apiKey: "xxxxxxxxxx",
    authDomain: "xxxxxxxxx.firebaseapp.com",
    databaseURL: "https://xxxxxxxx.firebaseio.com",
    projectId: "xxxxxxxxx",
    storageBucket: "xxxxxxxxxxx.appspot.com",
    messagingSenderId: "xxxxxxxxxx"
;
firebase.initializeApp(config);

【参考方案1】：

在文件夹plugins中创建文件firebase.js。

import firebase from 'firebase'
import 'firebase/firestore' //if use firestore

if (!firebase.apps.length) 
  firebase.initializeApp(
    apiKey: "xxx",
    authDomain: "xxx",
    databaseURL: "xxx",
    projectId: "xxx",
    storageBucket: "xxx",
    messagingSenderId: "xxx"
  )


firebase.firestore().settings( timestampsInSnapshots: true )

const db = firebase.firestore()
const storage = firebase.storage() //if use storage

export  storage, db 

在组件中：

import  db  from '~/plugins/firebase.js'

data() 
  return 
    users: []
  
,
mounted() 
  db.collection("users").get().then((querySnapshot) => 
    this.users = querySnapshot.docs.map(doc =>
      Object.assign( id: doc.id , doc.data())
    )
  )