问题标签 [vuefire]

我正在使用 Nuxt 构建一个网络应用程序，并且很难尝试从 Firestore 中的消息集合中获取一条随机消息。

我尝试使用一种方法来返回随机消息以及随机化messages对象中数组的索引值。

为了更好地解释，这就是我的 Messages.vue 组件的当前脚本标记的样子：

该randomMessage()方法确实从集合中返回了一个随机消息对象，但它是整个对象，我只.text想要message. 换句话说，{{messages[Math.floor(Math.random()*this.messages.length)]}}可以从 Firestore 返回一个随机消息文档，但是当我使用 时{{messages[Math.floor(Math.random()*this.messages.length)].text，我收到一个错误：

我也尝试在此线程中遵循 Dan McGrath 的回答但没有成功：

Firestore：如何在集合中获取随机文档

我不确定如何在我的 Nuxt 项目中实施 Wrap-around 解决方案。当我尝试将该解决方案用作我的脚本导出中的一种方法时，我得到一个语法错误。

完整的 repo 可以在这里找到：https ://github.com/SIeep/motivation-app

任何帮助或指导表示赞赏！

更新：TL；DR - 不是 firebase / vuefire 问题

如果有人遇到这种寻求速度问题的解决方案 - firebase 和 vuefire 都没有错。

经过多次试验，我发现一个字体很棒的图标是罪魁祸首——我还没有弄清楚究竟是如何或为什么，但无论如何，这不是 firebase / vuefire 问题。

---

我正在将Vuefire与 Firestore 数据库一起使用。

查询 Firestore 数据库中超过 100 条记录的速度非常慢。例如，返回 700 条记录的查询大约需要 1 分钟：

第一个查询和任何后续查询都是如此。

这些不是大文件。

我在这里做错了什么？除了将返回的记录数限制为 < 100 之外，我还能做些什么来提高性能？

相关代码（Vue CLI）：

所以我在Vue上做了一个简单的应用程序。然后我意识到将它与在线数据库连接会很酷，所以我想我会尝试 Firebase（我的后端知识很少，所以我想要一些快速和“简单”的东西）。

问题出在下一行：

当我这样做时，items位于data()任何 vue 组件中的原始数组会被该集合的对象填充。

问题是我只想获取该集合中每个对象的字段（例如，name每个待办事项的字段），而不是整个对象。我看了看，似乎没有简单的方法来做“db.collection('items).name”

所以我想在做一个函数将该数据放入一个数组中，然后将其传递到项目中：

好吧，我不知道我是否在那里犯了很多错误，但关键是我想“清理”Firestore 给我的东西。

问题是我什至无法尝试该功能，因为当我console.log(db.collection('items'))没有给我一个对象数组而是一个“Firestore Collection”时，但是为什么应用程序可以完美地呈现数据，就像它是一个简单的数组一样？

我正在从另一个视图导航到一个视图，并将 itemdId 作为参数值传递给 vue 路由器。

我希望能够使用该 itemId 调用 firebase，以便我可以过滤数据并在 UI 中使用过滤后的结果/数据。我正在使用vuefire.

发生的事情是 vue 在 created() 中的数据可用之前开始渲染，我看到错误是控制台说视图正在引用未定义的属性值。

有没有办法在数据可用后渲染视图？

我已经尝试过 usingbeforeMount以及 ascreated和beforeCreate方法。

请参见下面的代码：

脚本代码如下：

Firebase 截图在这里

我以为 vue 开发工具中存在错误，但现在我想知道 vuexfire 是否存在反应性错误？显然，突变正在触发......

但是，在 vue 开发工具中，状态始终为 0 长度。

但是，console.log 显示它确实从 firebase 拉下了我的两条记录

我的用户详细信息（例如名称）也存在问题，一旦数据被拉入 vuex，它不会触发反应链并更新 getter（对象在 vue 开发工具中也是空的，而数据显示在控制台.log())。任何帮助将不胜感激！谢谢！

由于我不是 JS 专家，因此对解决这个问题感到沮丧。

我使用 Firestore 作为数据库，使用 VuexFire 将数据绑定到 VueX 状态，就像这样。

它获得前 30 个结果，然后我想实现一个无限滚动功能，以在每次滚动到达底部时运行一个函数并获取更多数据并绑定到相同的状态。在 Firestore 中，分页需要将最后获取的文档的查询游标作为参考传递

下面来自 firebase 文档，带有 vanilla JS

因为我使用 VuexFire 将数据绑定到状态，所以我没有看到一个选项来获取 VuexFire 获取的最后一个文档的快照（来自上述代码的 lastVisible），以便将其传递给下一个查询。

任何帮助将不胜感激。

我正在尝试在 store.js 文件中构建一个利用 Vuexfire 的 Vue.js 应用程序。我的 store.js 文件如下所示：

我从文档中了解到该.bindFirestoreRef()方法是将 Firestore 绑定到 Vuex 存储的方法，而firestoreAction它是一个注入上下文对象的包装器.bindFirestoreRef()，因此它可以用作存储的方法（与提交方法相同） . 有效载荷然后被提交到突变，同时vuexfireMutations显然在幕后处理状态的突变。这是否意味着这vuexfireMutations是一种方法？什么是正确的形容词vuexfireMutations？我真的不觉得文档很好地解释了这个导入的项目是什么。我只是不得不猜测它是处理突变的东西，但它的正确术语是什么？

我想将我props.items的方法传递给之后在 Firebase 中更改/删除它的值。我是这样做的@click，但 Vue 不允许props.item.id在方法声明中。我错过了什么？

和脚本摘录：

我有一个添加功能可以将电影添加到 firebase 数据库

但是我收到一个错误Unresolved variable $firebaseRefs ，当我尝试将路由更改添加到 http://localhost:8080/add时？

我已经进口了

数据库.js

下面是 main.js 文件

main.js

我正在构建一个在 store.js 文件中使用 Vuexfire 的 Vue.js 应用程序。我的应用程序使用户能够将用户输入的带有时间戳的帖子推送到 Firestore。我正在配置我的 Vuexfire 操作处理程序，以提交按时间戳顺序排列的 firebase 有效负载的突变，如下所示：

此设置按时间戳正确排列帖子。但是，我希望使用 Moment.js 格式化时间戳，但不确定如何将 Moment 正确应用于动作处理程序。我尝试将时间戳包装在 Moment 中，如下所示：

...但这没有返回任何输出，只有控制台中的警告。我还尝试设置输入组件，以便推送到 Firebase 的时间戳已经使用 Moment 进行格式化，但帖子没有以正确的顺序返回。知道如何在 Vuexfire 操作处理程序中正确设置 Moment.js 以格式化时间戳吗？谢谢！