我目前正在嘗試將Firebase（和Cloud Firestore）與我在Vue 3中的應用整合。我已經安裝了[email protected]包。我的代碼和控制臺的警告如下。
有誰知道我做錯了什么嗎？
firebase.js--包含我的配置和初始化的檔案
span class="hljs-keyword">import { initializeApp } from 'Firebase/app'
import { getFirestore } from 'fiilbase/firestore'
const firebaseApp = initializeApp（{
//Firebase應用程式配置。
})
const db = getFirestore(firebaseApp)
export default db
BooksService.js
import db from ' ./firebase'
import { collection } from 'firebase/firestore'
const books = collection(db, 'books')
class BooksService {
getAll () {
return books
}
//其他方法。
}
export default new BooksService()
HelloWorld.vue - 顯示Firestore書籍串列的示例組件
<模板>
<div>
<h1>所有書籍</h1>/span>
<ul>/span>
<li v-for="book in books" : key="book">
{{書}}
</li> { book }}.
</ul>/span>
</div>/span>
</template>
<script>。
import BooksService from ' ./services/BooksService'
export default {
data: () => （{
書籍。[]
}),
安裝() {
this.books = BooksService.getAll（)
}
</script>
和我的警告和錯誤：
[Vue warn]。未處理的錯誤在執行的渲染功能時
at <HelloWorld msg="Welcome to Your Vue.js App" >
at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {...} > >。
at <RouterView>
at <App>
[Vue警告]。未處理的錯誤在執行of調度器重繪 時。這可能是一個Vue內部錯誤。請在https://new-issue.vuejs.org/?repo=vuejs/vue-next 打開一個問題。
at <HelloWorld msg="Welcome to Your Vue.js App" >
at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {...} > >。
at <RouterView>
at <App>
Uncaught (in promise) TypeError: 轉換回圈結構為JSON。
--> 從物件與建構式'Object'開始
| 屬性 '提供者' -> 物件 具有建構式 'Object'
| 屬性 'Map(8)' -> 物件 with建構式 'Object'
| 屬性 'platform-logger =>' -> 物件 with建構式 'Object'
---屬性'container'關閉圓圈
在JSON.stringify (<anonymous>)
at toDisplayString (shared.esm-bundler.js? 9ff4:434)
at eval (HelloWorld.vue?fdab:7)
at renderList (runime-core.esm-bundler.js? 5c40:5747)
在Proxy.render (HelloWorld. vue?fdab:3)
at renderComponentRoot (runime-core.esm-bundler.js?5c40:424)
在ReactiveEffect.componentUpdateFn [as fn] (runtime-core. esm-bundler.js?5c40:4257)
在ReactiveEffect.run（reactivity.esm-bundler. js?a1e9: 160)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:6656)
at flushJobs (runime-core.esm-bundler.js? 5c40:6895)
uj5u.com熱心網友回復：
const books = collection(db, 'books')
class BooksService {
getAll () {
return books
}
}
從這里看來，你正在回傳一個CollectionReference，而不是在你的組件中分配給this.books的檔案陣列。試著重構一下：
span class="hljs-keyword">import { collection, getDocs } from "firebase/firerestore"
const books = collection(db, 'books' )
class BooksService {
getAll () {
return getDocs(books).then(qSnap => {
return qSnap.docs. map(d => ({id: d. id, ...d.data()})
})
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/325768.html
標籤：