Как сделать запрос с помощью vuexfire - PullRequest
Новая
       81

Как сделать запрос с помощью vuexfire

0 голосов
/ 03 мая 2018

Я управлял своим состоянием с помощью vuexfire. А пока и для тестирования я привязываюсь к каждому «столу» / узлу в Firebase. Когда данные начинают расти, мне нужно делать запросы, чтобы я не отправлял столько данных клиенту.

Например. Я связываюсь с «таблицей заказов» с помощью db.ref («заказы»), но мне нужно связать заказы только для одного офиса (все заказы для всех офисов находятся в одном узле). Что-то вроде параметра db.ref ('orders'). EqualTo (xx) xx => для выбранного офиса. Возможно ли это?

Возможно, это не проблема, только его заказы с особым статусом, поэтому обработанные заказы будут удалены, но увеличатся при добавлении нового офиса. Например, 1000 заказов (но будет увеличиваться при добавлении нового офиса).

Какой-то код -

В firebaseconfig.js 

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

In App.vue 

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

В index.js (store / vuex) и действиях 

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

И у меня есть офисный массив в состоянии. Выше какое-то расширенное действие от vuexfire. Я не могу передать свой собственный param-объект вместо ref, я все время получаю «undefined» и не могу добраться до своих получателей, чтобы получить параметр для установки. Я хотел бы сделать что-то подобное в действии, привязать к офисному столу для специального кабинета (ключ) - 

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>

--- FIREBASE --- 

offices
  office1
    city: town1
  office2
    city: town2

Ответы [ 2 ]

0 голосов
/ 11 мая 2018

Я не уверен, что полностью понимаю, но я нашел решение, которое работает для меня. Я думаю, что проверял это раньше, но по какой-то причине я отказался от этого решения. Во всяком случае -

  • Невозможно (для меня) изменить "ref".
  • Невозможно (для меня) достичь добытчиков (или состояния) изнутри расширенное действие.

Я передаю полезную нагрузку вместо ссылки и без скобок - 

(({ bindFirebaseRef }, payload)

Тогда я могу передать полезную нагрузку со всеми данными - 

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

И использовать его в действии - 

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

Может быть, это также имеет значение с того места, откуда вы звоните

0 голосов
/ 03 мая 2018

Вы можете запросить ваш ref, основываясь на равенстве определенного дочернего свойства каждого order, используя комбинацию orderByChild() и equalTo(). orderByChild() необходимо для определения целевого дочернего свойства. equalTo используется для сопоставления элементов в базе данных со значением. Если свойство office каждого 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)
})

Вот обновленный пример в действии, показывающий привязку к ссылке без каких-либо методов запроса и затем привязку к ссылке с помощью orderByChild() и equalTo.

Надеюсь, это поможет!

Примечание: При запросе по дочернему свойству вы можете увидеть предупреждение о необходимости добавления indexOn . Это будет добавлено в ваш файл правил Firebase для узла orders.

...