无法让 Firestore 模拟器与 Vue 一起使用

Question

当我连接到localhost:8080 时，我会在屏幕上打印一个 html“ok”。就是这样。

此外，当我访问模拟器 UI 时，我的 Firestore 数据库是空的，当我点击保存时，我尝试添加的任何数据都不会保存 - 实际上没有任何反应。

文档对于在 Vue 上为初学者进行设置感到困惑。

ma​​in.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// import * as Firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/functions';
import 'firebase/storage';
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";

const firebaseConfig = {
 **firebase config stuff**
};

// Initialize Firebase
initializeApp(firebaseConfig);
const app = initializeApp(firebaseConfig);

// init services
const db = getFirestore(app)
connectFirestoreEmulator(db, 'localhost', 8080);
createApp(App).use(router).mount('#app')

非常感谢您的帮助！

Answer 1

关于你注意到的行为，这是我对每个人的回答-

a) 当您连接到localhost:8080 时，您会在屏幕上看到一个html“ok”。 这通常发生在点击浏览器或通过 curl 命令时。没关系。

b) 此外，当您访问模拟器 UI 时，我的 Firestore 数据库是空的。 听起来您在启动 Firestore 模拟器后期待一些预加载的数据，或者期待将数据永久保留在模拟器中。 Cloud Firestore 模拟器在关闭时会清除数据库内容，如记录 here 所述。除非用户定义 export / import configuration on the emulator，否则存储在 Firestore 模拟器中的任何数据都不会在模拟器的关闭/启动操作之间保留。此外，您在消息中显示的代码 sn-p 未显示任何加载 Firestore 数据库的尝试。所以这方面的理解可以参考文档。

c) 当您单击“保存”时，您尝试添加的任何数据都不会保存 - 实际上没有任何反应。 在我本地安装的 Firestore 模拟器中，它按设计工作。我能够通过模拟器 UI 在 Firestore 上添加新的集合和文档。

此外，还有一些很棒的 Firestore 模拟器视频教程，可以参考以详细了解此主题 - 1 和 2。 堆栈溢出answer 还详细介绍了使用 Vue JS 很好地设置 Firestore 模拟器的过程。