如何在 Firestore for Web 中启用离线数据

Question

我想在我的项目中启用离线数据。 我找到了正确的代码，但我不知道在哪里实现代码

我在firebaseConfig.js 文件中实现代码：

import firebase from 'firebase'
import 'firebase/firestore'

// firebase init
// init code goes here
var config = {
 apiKey: '',
 authDomain: '',
 databaseURL: '',
 projectId: '',
 storageBucket: '',
 messagingSenderId: ''
} 
firebase.initializeApp(config)

firebase.firestore().enablePersistence()
 .then(function () {
   // Initialize Cloud Firestore through firebase
   var db = firebase.firestore();
 })
 .catch(function (err) {
   console.log(err)
 })

 // firebase utils
 const db = firebase.firestore()
 const oldRealTimeDb = firebase.database()
 const auth = firebase.auth()
 const currentUser = auth.currentUser

 // date issue fix according to firebase
 const settings = {
   timestampsInSnapshots: true
 }
 db.settings(settings)

 // firebase collections
 const usersCollection = db.collection('users')
 const postsCollection = db.collection('posts')

export {
 db,
 auth,
 currentUser,
 postsCollection,
 usersCollection

}

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import {store} from './store'
import './registerServiceWorker'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader 
const fb = require('./firebaseConfig.js')

Vue.config.productionTip = false

export const bus = new Vue()

Vue.use(Vuetify)

let app
fb.auth.onAuthStateChanged(user => {
 if (!app) {
  app = new Vue({
   el: '#app',
   store,
   router,
   template: '<App/>',
   components: {
     App
   },
   render: h => h(App)
 }).$mount('#app')
}
})

我收到了这个错误：

Answer 1

documentation 中提供的示例代码建议您应该调用 enablePersistence() 并可能在由于某些给定原因而失败时记录：

firebase.initializeApp({
  apiKey: '### FIREBASE API KEY ###',
  authDomain: '### FIREBASE AUTH DOMAIN ###',
  projectId: '### CLOUD FIRESTORE PROJECT ID ###',
});

firebase.firestore().enablePersistence()
  .catch(function(err) {
      if (err.code == 'failed-precondition') {
          // Multiple tabs open, persistence can only be enabled
          // in one tab at a a time.
          // ...
      } else if (err.code == 'unimplemented') {
          // The current browser does not support all of the
          // features required to enable persistence
          // ...
      }
  });

调用enablePersistence() 之后的后续查询将在内部排队，直到完全完成，这意味着查询可能使用也可能不使用本地缓存的数据，具体取决于enablePersistence() 的结果。如果能够使用本地持久性对您的应用很重要，您可能希望在执行查询之前等待其结果（触发返回的 Promise）。

Answer 2

只需删除第二个firebase.firestore() 并调用 enablePersistence 如下：

import firebase from 'firebase'
import 'firebase/firestore'

// firebase init
// init code goes here
var config = {
 apiKey: '',
 authDomain: '',
 databaseURL: '',
 projectId: '',
 storageBucket: '',
 messagingSenderId: ''
} 
firebase.initializeApp(config)

const db = firebase.firestore();
const auth = firebase.auth();
const currentUser = auth.currentUser;

// date issue fix according to firebase
const settings = {
  timestampsInSnapshots: true
};
db.settings(settings);
db.enablePersistence();

// firebase utils
//const db = firebase.firestore() // <---- Remove this line
const oldRealTimeDb = firebase.database()
const auth = firebase.auth()
const currentUser = auth.currentUser