Skip to content

useRTDB

Category
Export Size
210 B
Package
@vueuse/firebase
Last Changed
last month

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

用法

js
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 引用

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

或者使用核心包中的 createGlobalState

js
// store.js
import { createGlobalState } from '@vueuse/core'
import { useRTDB } from '@vueuse/firebase/useRTDB'

export const useTodos = createGlobalState(
  () => useRTDB(db.ref('todos')),
)
js
// app.js
import { useTodos } from './store'

const todos = useTodos()

类型声明

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

Source

SourceDocs

贡献者

Anthony Fu
丶远方
Robert Soriano
Antério Vieira
Anthony Fu
Jelf
Phil Li

变更日志

v10.3.0 on 7/30/2023
b5e52 - feat: add errorHandler option (#3232)

Released under the MIT License.