Vuex + Nuxt SPA 中已存在名为“[DEFAULT]”的 Firebase 应用

Question

我使用 Vue CLI 和 nuxt/starter 模板。我在/store 文件夹中创建了index.js，内容如下：

import Vuex from 'vuex'
import firebase from 'firebase'
import { firebaseMutations } from 'vuexfire'

var db = firebase.initializeApp({
  databaseURL: 'https://vuefiredemo.firebaseio.com'
}).database()

var todosRef = db.ref('todos')

const store = new Vuex.Store({
  state: {
    counter: 0,
    todos: todosRef
  },
  mutations: {
    increment (state) {
      state.counter++
    },
    decrement (state) {
      state.counter--
    },
    ...firebaseMutations
  }
})

export default store

这有效，数据有效，直到页面被刷新和服务器端呈现。只有当 SSR 我得到以下错误：

Nuxt.js 错误：[DEFAULT]：Firebase：名为“[DEFAULT]”的 Firebase 应用程序已存在 (app/duplicate-app)。

这是因为 SSR 创建了一个 Firebase 实例，然后客户端创建了另一个？

Answer 1

你可以试试这个：

if (firebase.apps.length === 0) {
  firebase.initializeApp({
    databaseURL: 'https://vuefiredemo.firebaseio.com'
  })
}
export default firebase.database()