Javascript 如何在firestore for web中启用脱机数据

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

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

}

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')
}
})

我得到了这个错误：

只需删除第二个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

只需删除第二个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

---

中提供的示例代码建议您调用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的结果。如果能够使用本地持久性对您的应用程序很重要，则在执行查询之前，您可能希望等待其结果触发返回的承诺。

中提供的示例代码建议您调用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的结果。如果能够使用本地持久性对你的应用程序很重要，那么在执行查询之前，你可能希望等待其结果触发返回的承诺。

如果我没有弄错的话，Lukas，你正在使用Vue.js。能否共享main.js文件以及main.js中可能需要的所有文件如果我没有弄错的话，Lukas，您使用的是Vue.js。你能分享你的main.js文件吗？可能还有main.js中需要的所有文件。是的，这是我以前也做过的，但同样的错误。我认为你应该向上移动数据库。设置设置我做了一些额外的更改。你能确认它还可以吗？我暂时无法测试它可以工作，但数据库集合不能…->'未定义的集合此代码如何可靠地工作？从enablePersistence返回的承诺被忽略。直到承诺成功解决，持久性才真正启用。是的，这是我以前也做过的，但同样的错误，我认为你应该提高数据库。设置设置我做了一些额外的更改。你能确认它还可以吗？我暂时无法测试它可以工作，但数据库集合不能…->'未定义的集合此代码如何可靠地工作？从enablePersistence返回的承诺被忽略。直到承诺成功解决，持久性才真正启用。第一个答案在技术上并不正确，因为它忽略了enablePersistence返回的承诺。它不能保证下一个查询将使用持久性。使用文档中提供的示例代码获得最佳行为。我如何知道第一个exmaples无法工作？调用enablePersistence后立即发生的查询是否能够在没有internet连接的情况下检索缓存数据？如果没有，那么持久性就不起作用了。我刚刚和Firestore客户团队讨论过这个问题。看起来原始代码样本有误导性。为了进行第一次查询，实际上不必等待enablePersistence返回的承诺的结果。查询将在内部排队，直到enablePersistence完全完成。文档中的代码示例将很快更新。我也会更新我的答案。你能看一下这个带有handle online/offline状态的答案吗？请：第一个答案在技术上不正确，因为它忽略了enablePersistence返回的承诺。它不能保证下一个查询将使用持久性。使用文档中提供的示例代码获得最佳行为。我如何知道第一个exmaples无法工作？调用enablePersistence后立即发生的查询是否能够在没有internet连接的情况下检索缓存数据？如果没有，那么持久性就不起作用了。我刚刚和Firestore客户团队讨论过这个问题。看起来原始代码样本有误导性。为了进行第一次查询，实际上不必等待enablePersistence返回的承诺的结果。查询将在内部排队，直到enablePersistence完全完成。文档中的代码示例将很快更新。我也会更新我的答案。你能看看这张有联机/脱机状态的照片吗？请：