How to query with vuexfire

Question

I managed my state with vuexfire. For now and testing I bind to each "table" / node in Firebase. As data starts to grow I need to query so I don't send so much data to the client.

For example. I bind to the order "table" with db.ref('orders') but need to bind to orders for just one office (all orders for all offices is in the same node). Something like db.ref('orders').equalTo(xx) xx => parameter for picked office. Is it possible?

Maybe its not a problem, its only orders with a special status so handled orders will be removed but will increase when new office are added. For example 1000 orders (but will increase when new office are added).

Some code -

In firebaseconfig.js

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

In App.vue

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

In index.js (store / vuex) and actions

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

And I have a office array under state. Above is some kind of extended action from vuexfire. I cant pass in may own param-object instead of ref, I get "undefined" all the times and I cant reach my getters to get the parameter to set. I would like to do something like this in the action, bind to office table for a special office (key) -

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

--- MORE CODE --- index.js (store)

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>

--- FIREBASE ---

offices
  office1
    city: town1
  office2
    city: town2

Answer 1

I am not sure that I completely understand but I have come up with a solution that works for me. I think I have tested it before but for some reason I abandon that solution. Anyway -

• Its not possible (for me) to change the "ref".
• Its not possible (for me) to reach the getters (or state) from inside the extended action.

I pass a payload instead of the ref and no brackets around -

(({ bindFirebaseRef }, payload)

Then I can pass the payload with all data -

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

And use it in the action -

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

Maybe it also matters from where you call the dispatch