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>