How to re-use the firestore's db accross the different page in View?

J4N 0
Viewed 41

I'm creating for the first time a Vue app with VueUse.

In my main.ts, I've this:

const firebaseConfig = {
  //....
}
// Initialize Firebase
const app = initializeApp(firebaseConfig)
const db = getFirestore(app)
export const useTodos= createGlobalState(
  () => useFirestore(collection(db, 'todos')),
)

So in my views, when I want to use my Todos, it works fine with the useTodos hook, but there is a lot of time where I need to access a very specific document(something like /collection/key-one/sub-collections/key-two/property ).

Typically, I would access this:

const someDocument = useFirestore(doc(db, 'collection', myKey, 'sub-collections', myKeyTwo))
console.log(someDocument.property)

But I don't have access to the db field. How can I retrieve it?

vueuse google-cloud-firestore firebase vue.js javascript
1 Answers

As stated in the comments, and assuming that you are using Firebase V9 or greater,

In your main.ts

export const db = getFirestore(app)

In other views:

import { db } from "../path/to/firebase.js"

const someDocumentRef = doc(db, `collection/${id}/sub-collection/${id}`);

const someDocumentSnapshot = await getDoc(someDocumentRef);

const myDoc = someDocument.data();

const myProperty = myDoc.someProperty;
Rafael Zasas0
Related