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

Posted 2023-02-22

【中文标题】Firestore + Vue：刷新页面时，如何避免数据显示延迟？

【英文标题】：Firestore + Vue: When refreshing the page, how to avoid delay in data display?

【发布时间】：2021-11-09 01:44:24

【问题描述】：

每次我刷新页面时，都会在 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：

【问题讨论】：

这就是全局存储 (Vuex) 的用途。

【参考方案1】：

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

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

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

【讨论】：

你的解释很好！！我使用 Vue.js 已经有一段时间了，但我仍然不知道这些库。我正在研究更多关于 Vuex 的信息，并确保它的实现简单易懂。

@Arnon 如果这个答案有帮助，记得点赞并接受它以结束问题:)

是的，当然，伙计。我只是将我正在学习的有关 Vuex 的概念应用到我的项目中。如果我可以毫无疑问地将这个文件“迁移”到 Vuex，我会接受你的回答。如果没有，我会用更具体的内容编辑我的问题。