VueJs、Vuefire、Firestore：如何过滤同步的 Firestore 文档答案

【问题标题】：VueJs, Vuefire, Firestore: How can I filter a synched Firestore documentVueJs、Vuefire、Firestore：如何过滤同步的 Firestore 文档
【发布时间】：2019-01-05 20:30:00
【问题描述】：

使用 vuefire 允许我在 vue 实例上设置一个 firestore 对象并自动将其与 Firestore 同步。我还想为另一个数据点过滤它，但过滤会导致错误。

下面的代码返回所需的工作人员并完美地工作。 Firebase 用户 (fbUser) 返回

WEBPACK_IMPORTED_MODULE_0__services_Firebase.a.collection(...).filter 不是函数

并且 VueTools 中的数据点为空

firestore() {
    return {
        staff: db.collection('staff').orderBy('lastname'),
        fbUser: db.collection('staff').filter(s => s.email === this.current_user.email)
    }
 },

【问题讨论】：

标签： vuejs2 google-cloud-firestore vuefire

【解决方案1】：

db.collection 不直接返回结果。我不知道实现，但我想vuefire 将创建一个名为fbUser 的数据字段并将结果保存在其中。

我认为，最好的解决方案是使用计算数据，例如：

computed: {
    fbUserFiltered () {
        return this.fbUser.filter(s => s.email === this.current_user.email);
    }
}

【讨论】：

【解决方案2】：

我意识到这是一个老问题，但我有同样的问题，想要一个更一般的答案。

如果您想避免仅查询整个集合以丢弃客户端上的不匹配结果，您可以在created() 事件中使用$bind() 函数，例如

  data: () => ({
    finance_staff: [],
  }),

  created() {
    const filtered_entries = db.collection('staff').where('department', '==', 'finance');
    this.$bind('finance_staff', filtered_entries);
  },

或者如果您需要等待身份验证状态：

  created() {
    auth.onAuthStateChanged(async user => {
      if (!user) return;
      const filtered_entries = db.collection('staff').where('manager_id', '==', user.uid);
      this.$bind('my_staff', filtered_entries);
    });
  },

请注意，如果您已经知道文档 ID，那就更简单了：

  firestore: {
    current_employee: db.collection("staff").doc("abcd1234")
  },

【讨论】：