useRTDB

リアクティブな Firebase Realtime Database バインディング。リモートデータベースと常にローカルデータを同期させることを簡単にします。

使用法

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

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

// setup() 内で
const todos = useRTDB(db.ref('todos'))

autoDispose: false を渡すことで db リファレンスを再利用できます

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

またはコアパッケージの createGlobalState を使用します

// @filename: store.ts
// ---cut---
// store.ts
import { createGlobalState } from '@vueuse/core'
import { useRTDB } from '@vueuse/firebase/useRTDB'

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

{/* app.vue */}