我用 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'))
})
}
})
应用程序.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