useRTDB

カテゴリ

@Firebase

エクスポートサイズ

210 B

パッケージ

@vueuse/firebase

最終更新日

先週

リアクティブな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を渡すことで、db参照を再利用できます。

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

または、コアパッケージからcreateGlobalStateを使用します。

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

export const useTodos = createGlobalState(
  () => useRTDB(db.ref('todos')),
)

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