跳到主要內容

useRTDB

Category
導出大小
257 B
Package
@vueuse/firebase
Last Changed
3 weeks ago

響應式 Firebase Realtime Database 綁定。使其能夠直接地始終保持本地數據與遠程數據庫同步。可在 @vueuse/firebase 附加元件中使用。

用法

js
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 來重複使用 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.dev.org.tw/useRTDB
 */
export declare function useRTDB<T = any>(
  docRef: DatabaseReference,
  options?: UseRTDBOptions,
): Ref<T | undefined, T | undefined>

原始碼

原始碼文件

貢獻者

Anthony Fu
Robert Soriano
Antério Vieira
Anthony Fu
Jelf
Phil Li

更新日誌

v12.0.0-beta.1 於 2024/11/21
0a9ed - feat!: 移除 Vue 2 支援,優化捆綁包並清理 (#4349)
v10.3.0 於 2023/7/30
b5e52 - feat: 新增 errorHandler 選項 (#3232)

在 MIT 許可證下發布。