如何用vuexfire查询

Question

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

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

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

而且我在状态下有一个办公阵列。以上是 vuexfire 的某种扩展动作。我不能传入可能拥有的参数对象而不是 ref，我总是得到 "undefined" 并且我无法到达我的 getter 来获取要设置的参数。我想在行动中做这样的事情，绑定到 office table 一个特殊的 office (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

您可以通过使用 orderByChild() 和 equalTo() 的组合，根据每个 order 的特定 child 属性的相等性查询您的 ref . orderByChild() 是针对特定 child 属性所必需的。 equalTo 用于根据值匹配数据库中的项目。如果每个 order 的办公室属性称为 office，查询将如下所示：

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

在操作方面，尝试将 ref 查询 in/prior 设置为 store.$dispatch 而不是实际在 setOfficeRef 操作中。根据您是否要在选择一个办公室之前加载所有办公室，created() 可能看起来像下面这样加载所有办公室：

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

然后，也许用户从类似 <select> 的下拉列表中选择了办公室 name/value。这可以触发调度动作 setOfficeRef 使用 orderByChild() 和 equalTo():

通过查询传递更新的 ref

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

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

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

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

绑定到 ref

希望对您有所帮助！

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

Answer 2

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

（对我而言）无法更改 "ref"。
（对我而言）不可能从内部到达吸气剂（或状态）扩展动作。

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

(({ bindFirebaseRef }, payload)

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

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

并在动作中使用它-

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

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

如何用vuexfire查询

How to query with vuexfire

vue.js

vuex

vuexfire