Firestore + Vue：刷新页面时，如何避免数据显示延迟？

Question

每次我刷新页面时，都会在 Firestore 数据库中进行一个新查询，以向用户显示（有时）相同的数据。

这是一个书柜。下面的代码只读取已经添加的数据：

export default {
  name: "Shelf",
  date: () => ({ shelfName: "", books: [] }),
  async mounted() {
    const auth = getAuth();
    const db = getFirestore();
    const userID = auth.currentUser.uid;
    const userRef = doc(db, "users", userID);
    const userSnap = await getDoc(userRef);

    userSnap.exists()
      ? (this.shelfName = "Shelf: " + userSnap.data().name)
      : (this.shelfName = "Your Shelf");

    const userBooksRef = query(collection(db, "users", userID, "addedBooks"));
    const querySnapshot = await getDocs(userBooksRef);
    querySnapshot.forEach((doc) => {
      this.books.push({
        id: doc.id,
        addedIn: doc.data().addedIn,
        readIn: doc.data().readIn,
      });
    });

    this.books.map(async (book) => {
      const booksRef = doc(db, "books", book.id);
      const bookSnap = await getDoc(booksRef);

      book.authors = bookSnap.data().authors;
      book.title = bookSnap.data().title;
      book.thumbnail = bookSnap.data().thumbnail;
    });
  },
};

我不确定是否应该寻找缓存解决方案，或者是否有其他类型的解决方案。 下面我展示了books 集合。重要的是要说在 users 集合中有一个名为 addedBooks 的集合，它引用了下面每本书的 id：

Answer 1

刷新页面时，您正在销毁应用程序的前一个实例并加载一个新实例。因此，您的应用将像第一次打开应用一样重新执行所有查询。

正如 Estus 在 cmets 中提到的，这个问题通常通过将数据存储在 state 中，然后将该 state 放入 localstorage 来解决。当您的页面刷新时，您首先从 localstorage 加载状态（无延迟），然后在查询可用时使用查询中的当前数据更新状态。您也可以手动实现此过程，而无需使用状态管理库。

在本地存储中存储数据时，请确保每次数据更改时都更新它，并在不再需要时将其清除。