useRTDB

分类

@Firebase

导出大小

257 B

包

@vueuse/firebase

上次更改

8 个月前

响应式 Firebase Realtime Database 绑定。让本地数据始终与远程数据库保持同步变得简单明了。可在 @vueuse/firebase 插件中使用。

用法

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 来复用数据库引用

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

或者使用核心包中的 createGlobalState

// 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>

类型声明

export interface UseRTDBOptions {
  errorHandler
?: (err
: Error) => void
  autoDispose
?: boolean
}
/**
 * Reactive Firebase Realtime Database binding.
 *
 * @see https://vueuse.org.cn/useRTDB
 */
export declare function useRTDB
<T
 = any>(
  docRef
: DatabaseReference
,
  options
?: UseRTDBOptions,
): Ref
<T
 | undefined, T
 | undefined>