Skip to content

使用 RTDB

¥useRTDB

反应式 Firebase 实时数据库 结合。使本地数据始终与远程数据库保持同步变得简单。

¥Reactive Firebase Realtime Database binding. Making it straightforward to always keep your local data in sync with remotes databases. Available in the @vueuse/firebase add-on.

用法

¥Usage

ts
import { 
useRTDB
} from '@vueuse/firebase/useRTDB'
import {
initializeApp
} from 'firebase/app'
import {
getDatabase
} from 'firebase/database'
const
app
=
initializeApp
({ /* config */ })
const
db
=
getDatabase
(
app
)
// in setup() const
todos
=
useRTDB
(
db
.ref('todos'))

你可以通过传递 autoDispose: false 来重用数据库引用

¥You can reuse the db reference by passing autoDispose: false

ts
const 
todos
= useRTDB(db.ref('todos'), {
autoDispose
: false })

或使用核心包中的 createGlobalState

¥or use createGlobalState from the core package

ts
// store.ts
import { 
createGlobalState
} from '@vueuse/core'
import {
useRTDB
} from '@vueuse/firebase/useRTDB'
export const
useTodos
=
createGlobalState
(
() =>
useRTDB
(db.ref('todos')),
)
vue
<!-- app.vue -->
<script setup lang="ts">
import { 
useTodos
} from './store'
const
todos
=
useTodos
()
</script>