vue.js - 如何用vuexfire查询

Question

我用 vuexfire 管理我的状态。现在和测试我绑定(bind)到 Firebase 中的每个“表”/节点。随着数据开始增长，我需要进行查询，因此我不会向客户端发送太多数据。

例如。我使用 db.ref('orders') 绑定(bind)到订单“表”，但只需要绑定(bind)到一个办公室的订单(所有办公室的所有订单都在同一个节点中)。类似 db.ref('orders').equalTo(xx) xx => 所选办公室的参数。可能吗？

也许这不是问题，它只有具有特殊状态的订单，因此已处理的订单将被删除，但在添加新办公室时会增加。例如 1000 个订单(但会在添加新办公室时增加)。

一些代码-

在 firebaseconfig.js 中

export const dbOfficeRef = db.ref('office')

在 App.vue 中

export default {
  created() {
    this.$store.dispatch('setOfficeRef', dbOfficeRef)
  }
}

在 index.js (store/vuex) 和 actions 中

setOfficeRef: firebaseAction(({ bindFirebaseRef }, { ref }) => {
       bindFirebaseRef('office', ref)
})

而且我在状态下有一个办公室阵列。以上是 vuexfire 的某种扩展 Action 。我不能传入可能拥有的参数对象而不是 ref，我总是得到“未定义”并且我无法到达我的 getter 来获取要设置的参数。我想在 Action 中做这样的事情，绑定(bind)到一个特殊办公室的办公 table ( key )-

bindFirebaseRef('office', ref.orderByChild('officeKey').equalTo(key))

--- 更多代码---index.js(商店)

import Vue from 'vue'
import Vuex from 'vuex'
import { firebaseMutations } from 'vuexfire'
import { firebaseAction } from 'vuexfire'
import { dbOfficesRef } from '../firebaseConfig'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
        offices: []
    },
    getters: {
        getOffices: state => state.offices
    },
    mutations: {
        ...firebaseMutations
    },
    actions: {
        setOfficesRef: firebaseAction(({ bindFirebaseRef }, { ref }) => {
            bindFirebaseRef('offices', ref)
        }),
        setOfficesRef2: firebaseAction(({ bindFirebaseRef }, { ref }) => {
            bindFirebaseRef('offices', ref.orderByChild('city').equalTo('town1'))
        })
    }
})

App.vue

<template>
  <div id="app">
    <div>

        <p><button type="button" @click="setOffice2('town1')">Uppdatera</button></p>

        <ul>
            <li v-for="office in getOffices">
                {{ office.city }}
            </li>
        </ul> 

    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { dbOfficesRef } from './firebaseConfig'

export default {
    methods: {
    setOffice(city) {
      this.$store.dispatch('setOfficesRef', dbOfficesRef.orderByChild('city').equalTo(city))
    },
    setOffice2(city) {
      this.$store.dispatch('setOfficesRef2', dbOfficesRef.orderByChild('city').equalTo(city))
    },
  computed: {
    ...mapGetters([
        'getOffices'
    ])
  },
  created() {

    this.$store.dispatch('setOfficesRef', dbOfficesRef)

  }

}
</script>

--- 火力基地 ---

offices
  office1
    city: town1
  office2
    city: town2

Answer 1

您可以根据每个 order 的特定子属性的相等性查询您的 ref通过使用 orderByChild() 的组合和 equalTo() . orderByChild()是针对特定子属性所必需的。 equalTo用于根据值匹配数据库中的项目。如各办公属性(property)order叫做office ，查询看起来像:

dbOfficeRef.orderByChild("office").equalTo('someOfficeName')

在操作方面，尝试在 store.$dispatch 之前/之前设置 ref 查询而不是实际在你的setOfficeRef里面行动。根据您是否要在选择办公室之前加载所有办公室，created()加载所有办公室可能如下所示:

created() {
  this.$store.dispatch('setOfficeRef', dbOfficeRef);
}

然后，也许用户从类似于 <select> 的内容中选择了办公室名称/值之后落下。这可以触发调度行动 setOfficeRef使用 orderByChild() 通过查询传递更新的 ref和 equalTo() :

setOffice: function(office) {
  this.$store.dispatch('setOfficeRef', dbOfficeRef.orderByChild('office').equalTo(office));
}

调用bindFirebaseRef()时任何现有的绑定(bind)都将被替换。你绑定(bind)的 Action 可以和原来的保持一致:

setOfficeRef: firebaseAction(({ bindFirebaseRef }, { ref }) => {
  bindFirebaseRef('office', ref)
})

这是更新的 example在行动中显示了在没有任何查询方法的情况下绑定(bind)到 ref，然后使用 orderByChild() 绑定(bind)到 ref和 equalTo .

希望对您有所帮助!

注意:按子属性查询时，您可能会看到一条警告，需要添加 indexOn .这将添加到 orders 的 Firebase 规则文件中节点。