Skip to content

useFirestore

反应式 火库 结合。使本地数据始终与远程数据库保持同步变得简单。

¥Reactive Firestore binding. Making it straightforward to always keep your local data in sync with remotes databases. Available in the @vueuse/firebase add-on.

用法

¥Usage

ts
import { 
useFirestore
} from '@vueuse/firebase/useFirestore'
import {
initializeApp
} from 'firebase/app'
import {
collection
,
doc
,
getFirestore
,
limit
,
orderBy
,
query
} from 'firebase/firestore'
import {
computed
,
shallowRef
} from 'vue'
const
app
=
initializeApp
({
projectId
: 'MY PROJECT ID' })
const
db
=
getFirestore
(
app
)
const
todos
=
useFirestore
(
collection
(
db
, 'todos'))
// or for doc reference const
user
=
useFirestore
(
doc
(
db
, 'users', 'my-user-id'))
// you can also use ref value for reactive query const
postsLimit
=
shallowRef
(10)
const
postsQuery
=
computed
(() =>
query
(
collection
(
db
, 'posts'),
orderBy
('createdAt', 'desc'),
limit
(
postsLimit
.
value
)))
const
posts
=
useFirestore
(
postsQuery
)
// you can use the boolean value to tell a query when it is ready to run // when it gets falsy value, return the initial value const
userId
=
shallowRef
('')
const
userQuery
=
computed
(() =>
userId
.
value
&&
doc
(
db
, 'users',
userId
.
value
))
const
userData
=
useFirestore
(
userQuery
, null)

跨实例共享

¥Share across instances

你可以通过传递 autoDispose: false 来重用数据库引用。你还可以设置自动处置数据库引用之前的毫秒数。

¥You can reuse the db reference by passing autoDispose: false. You can also set an amount of milliseconds before auto disposing the db reference.

注意:再次获取未处理的数据库引用不需要 Firestore 读取。

¥Note : Getting a not disposed db reference again don't cost a Firestore read.

ts
const 
todos
=
useFirestore
(
collection
(db, 'todos'),
undefined
, {
autoDispose
: false })

或使用核心包中的 createGlobalState

¥or use createGlobalState from the core package

ts
// store.ts
import { 
createGlobalState
} from '@vueuse/core'
import {
useFirestore
} from '@vueuse/firebase/useFirestore'
export const
useTodos
=
createGlobalState
(
() =>
useFirestore
(collection(db, 'todos')),
)
vue
<!-- app.vue -->
<script setup lang="ts">
import { 
useTodos
} from './store'
const
todos
=
useTodos
()
</script>

类型声明

ts
export interface UseFirestoreOptions {
  
errorHandler
?: (
err
: Error) => void
autoDispose
?: boolean | number
} export type
FirebaseDocRef
<
T
> =
Query
<
T
> |
DocumentReference
<
T
>
type
Falsy
= false | 0 | "" | null | undefined
export declare function
useFirestore
<
T
extends
DocumentData
>(
maybeDocRef
:
MaybeRef
<
DocumentReference
<
T
> |
Falsy
>,
initialValue
:
T
,
options
?: UseFirestoreOptions,
):
Ref
<
T
| null>
export declare function
useFirestore
<
T
extends
DocumentData
>(
maybeDocRef
:
MaybeRef
<
Query
<
T
> |
Falsy
>,
initialValue
:
T
[],
options
?: UseFirestoreOptions,
):
Ref
<
T
[]>
export declare function
useFirestore
<
T
extends
DocumentData
>(
maybeDocRef
:
MaybeRef
<
DocumentReference
<
T
> |
Falsy
>,
initialValue
?:
T
| undefined | null,
options
?: UseFirestoreOptions,
):
Ref
<
T
| undefined | null>
export declare function
useFirestore
<
T
extends
DocumentData
>(
maybeDocRef
:
MaybeRef
<
Query
<
T
> |
Falsy
>,
initialValue
?:
T
[],
options
?: UseFirestoreOptions,
):
Ref
<
T
[] | undefined>

源代码

源代码文档

变更日志

最近没有更改