喜欢 post 时减少 Firebase Vue 应用中的响应时间

Question

我有一个应用程序有不同的 'procedures'（想想帖子或页面），有人会喜欢。目前该过程有效：点击 like => 运行方法“likeProcedure”=> 运行调度操作“likeProcedure”=> 更新 UI。它通常几乎立即发生，但有时会有延迟，给人一种“非本地”的感觉。有什么方法可以让我 return 立即得到反馈，同时在 firebase 数据库中保持单一的真实来源？

谢谢！

页面代码：

<v-icon
  v-if="!userProfile.likedProcedures || !userProfile.likedProcedures[procedure.id]"
  color="grey lighten-1"
  @click="likeProcedure({ id: procedure.id })"
>
  mdi-star-outline
</v-icon>

和

computed: {
  ...mapState(["userProfile"]),
  procedures() {
    return this.$store.getters.getFilteredProcedures();
  },
},

Vuex 代码：

async likeProcedure({ dispatch }, postId) {
      const userId = fb.auth.currentUser.uid;
      // update user object
      await fb.usersCollection.doc(userId).update({
        [`likedProcedures.${postId.id}`]: true,
      });

      dispatch("fetchUserProfile", { uid: userId });
    },

旁注：我正在尝试删除 dispatch("fetchUserProfile") 命令，但这不起作用，因为我在调用 dispatch 时没有使用它。而且我不能删除 dispatch 因为调用它的对象是空的。而且我无法删除该对象，因为这样参数 ('postId') 就不起作用了。因此，如果有人知道如何处理该问题，那将非常有帮助。

谢谢:)

Answer 1

所以这是我想出的最好的解决方案。它有点破坏单一事实来源的想法，但至少它提供了即时 UI 更新：

  async likeProcedure({ dispatch, state }, postId) {
    console.log("likeProcedure");
    const userId = fb.auth.currentUser.uid;

    // line below provides immediate update to state and hence to the UI
    state.userProfile.likedProcedures[postId.id] = true;

    // line below updates Firebase database
    await fb.usersCollection.doc(userId).update({
      [`likedProcedures.${postId.id}`]: state.userProfile.likedProcedures[
        postId.id
      ],
    });

    // line below then fetches the updated profile from Firebase and updates
    // the profile in state. Kind of useless, but ensures that client and
    // Firebase are  in-sync
    dispatch("fetchUserProfile", { uid: userId });
  },

  async fetchUserProfile({ commit }, user) {
    // fetch user profile
    const userProfile = await fb.usersCollection.doc(user.uid).get();

    // set user profile in state
    commit("setUserProfile", userProfile.data());

    // change route to dashboard
    if (router.currentRoute.path === "/login") {
      router.push("/");
    }
  },

喜欢 post 时减少 Firebase Vue 应用中的响应时间

Decrease response time in Firebase Vue app when liking a post

firebase

vue.js

firebase-realtime-database

vuex

lag