如何使用 vuexfire 进行查询

Question

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

例如。我使用 db.ref('orders') 绑定到订单“表”，但只需要绑定到一个办公室的订单（所有办公室的所有订单都在同一个节点中）。类似于 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) 和操作中

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

而且我在状态下有一个办公室阵列。 以上是 vuexfire 的某种扩展操作。我无法传入可能拥有的参数对象而不是 ref，我总是得到“未定义”，而且我无法到达我的 getter 来设置要设置的参数。我想在动作中做这样的事情，为一个特殊的办公室（钥匙）绑定到办公桌 -

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

您可以结合使用orderByChild() 和equalTo()，根据每个order 的特定子属性的相等性来查询您的引用。 orderByChild() 是定位特定子属性所必需的。 equalTo 用于将数据库中的项目与值进行匹配。如果每个order 的办公属性都称为office，则查询将如下所示：

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

在操作方面，尝试将 ref 查询设置在 store.$dispatch 中/之前，而不是实际设置在 setOfficeRef 操作中。根据您是否希望在选择办公室之前加载所有办公室，created() 在加载所有办公室时可能如下所示：

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

然后，用户可能从<select> 下拉列表中选择了办公室名称/值。这可以触发对操作setOfficeRef 的调度，通过使用orderByChild() 和equalTo() 的查询传递更新的引用：

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

当调用bindFirebaseRef() 时，任何现有的绑定都会被替换。你的绑定动作可以保持与原来一致：

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

这是一个更新的example 正在运行，显示绑定到没有任何查询方法的引用，然后绑定到具有orderByChild() 和equalTo 的引用。

希望对您有所帮助！

注意：通过子属性查询时，您可能会看到类似于需要添加indexOn 的警告。这将添加到 orders 节点的 Firebase 规则文件中。

Answer 2

我不确定我是否完全理解，但我想出了一个适合我的解决方案。我想我之前已经测试过它，但由于某种原因我放弃了那个解决方案。无论如何-

• （对我而言）不可能更改“参考”。
• （对我而言）不可能从内部接触到吸气剂（或状态） 扩展操作。

我传递了一个有效负载而不是 ref 并且没有括号 -

(({ bindFirebaseRef }, payload)

然后我可以传递带有所有数据的有效负载 -

var payload = {
    ref: ,
    state: '',
    search: '',
    searchval: 
}

并在动作中使用它-

bindFirebaseRef(state, ref.orderByChild(search).equalTo(searchval))

也许从哪里调用调度也很重要