javascript - Vuexfire：如何正确绑定来自 Firestore 的数据？

Question

我在 Firestore 中有一些条目，我想将它们加载到 vuex 商店并显示在我的应用程序中。我尝试使用此代码：

店铺：

const store = createStore({
  state() {
    return {
      entries: [],
    }
  }
});

行动：

const actions = {
  bindEntries: firestoreAction(({ bindFirestoreRef }) => {
    var ref = db.collection("Items");
    var query = ref.where("editors", "array-contains", "user1");
    return bindFirestoreRef("entries", query);
  }),
}

突变：

const mutations = {
  setUser(state, payload) {
    state.user = payload;
  },
  setError(state, payload) {
    state.error = payload;
  },
  ...vuexfireMutations,
};

在 App.vue 中

mounted() {
  this.$store.dispatch("bindEntries");
},

吸气剂：

const getters = {
  entries(state) {
    return state.entries;
  },
}

测试.vue

<template>
  <h3>Entries</h3>
  <p>{{ entries }}</p>
</template>

<script>
export default {
  computed: {
    entries() {
      return this.$store.getters.entries;
    },
  },
};
</script>

虽然我至少有一个符合条件的条目：

什么都没有显示：

我注意到的事情：

• 如果我没有跳过身份验证，而是登录并重定向到我的条目页面，那么所有条目都会正确显示。
• 如果我从中删除this.$store.dispatch("bindEntries");，App.vue也会出现整体（尽管我认为它们仍然保存在某个地方而不是直接从 firestore 中保存）

我做错了什么，我该如何适应？如果需要，您可以在此处找到完整代码。

非常感谢！