简单的任务列表排序 - 如何将其保存到 Firebase Firestore？答案

【问题标题】：Simple task list ordering - how to save it to Firebase Firestore?简单的任务列表排序 - 如何将其保存到 Firebase Firestore？
【发布时间】：2020-10-02 19:06:15
【问题描述】：

我正在使用 firebase firestore 和 Vue.js 创建一个简单的任务列表 Web 应用程序。一切似乎都很好，直到我尝试执行任务重新排序功能，这将项目变成了一场噩梦。

我可以使用基于著名的 sortable.js 库的 Vue Draggable 库在应用端轻松实现重新排序功能。基本上，我有一个迭代我的任务的 v-for 代码，如下所示：

<draggable v-model="tasks">
   <div v-for="task in tasks" :key="task.id">{{task.title}}</div>
</draggable>

请注意，这是用一个可拖动组件包装的，每当我拖动元素时，该组件都会重新排序数组，因此我的任务模型数组会自动动态重新排序。

到目前为止一切顺利，但现在我正在尝试将此重新排序与 Firebase Firestore 同步，但是，即使它允许我将元素推送或删除到存储阵列 (https://firebase.google.com/docs/reference/js/firebase.firestore.FieldValue#static-arrayunion)，它也不允许我在特定索引处插入，所以我无法保存重新排序。

我应该如何处理这个问题？

【问题讨论】：

标签： javascript firebase vue.js google-cloud-firestore

【解决方案1】：

如果您想以 arrayUnion 或 arrayRemove 不支持的方式按索引修改 Firestore 列表字段元素，您必须：

阅读文档
修改内存中的数组字段
使用新的数组内容将字段更新回文档

【讨论】：

我想到了这个，但是这个数组最终会有30-50kb的数据，而且会经常变化。每次都发送完整的数组，即使是很小的变化，似乎也太多了。
您别无选择，只能在子集合中使用单个文档，这可能更难管理。或者存储与其他地方的项目对应的 ID 列表。
是的，我也想到了ID列表，我只是觉得保持同步可能是更糟糕的噩梦。
几十千字节真的不算多。