useRTDB

类别

@Firebase

导出体积

257 B

依赖包

@vueuse/firebase

上次更改

7 months ago

响应式的 Firebase 实时数据库绑定。使得始终将本地数据与远程数据库同步变得简单直观。 Available in the @vueuse/firebase add-on.

用法

import { useRTDB
 } from '@vueuse/firebase/useRTDB'
import { initializeApp
 } from 'firebase/app'
import { getDatabase
 } from 'firebase/database'

const app
 = initializeApp
({ /* 配置 */ })
const db
 = getDatabase
(app
)

// 在 setup() 中
const todos
 = useRTDB
(db
.ref('todos'))

你可以通过传递 autoDispose: false 来重用 db 引用

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/useRTDB
 */
export declare function useRTDB
<T
 = any>(
  docRef
: DatabaseReference
,
  options
?: UseRTDBOptions,
): Ref
<T
 | undefined, T
 | undefined>