pinia-plugin-firestore-sync

Pinia Firestore Sync

Sync your pinia 🍍 store with Firestore at ease!

Installation

npm install pinia-plugin-firestore-sync

Usage

Preparation

At first, you need to add plugin by use

import { PiniaFirestoreSync } from 'pinia-plugin-firestore-sync'

const pinia = createPinia().use(firestoreSyncPlugin)
app.use(pinia).mount('#app') 

Sync with Document

 type ExampleDoc = {
   name: string,
   age: number
 }
 
 export type State = {
   docData: ExampleDoc | null,
 }
 
 export const useExampleStore = defineStore('expamle', {
   state: (): State => {
     return {
       docData: null,
     }
   },
   actions: {
     async setup() {
       // Get Document reference
       const store = getFirestore()
       const docRef = doc(store, 'Examples/id')
 
       // Do the magic
       this.sync('docData', docRef)
     }
   }
 })

Sync with Collection

type ExampleDoc = {
  name: string,
  age: number
}

export type State = {
  collectionData: ExampleDoc[] | null,
}
export const useExampleStore = defineStore('expamle', {
  state: (): State => {
    return {
      collectionData: null,
    }
  },
  actions: {
    async setup() {
      // Get Collection reference
      const store = getFirestore()
      const collectionRef = collection(store, 'Examples')

      // Do the magic
      this.sync('collectionData', collectionRef)
    }
  }
})

Sync with Query

type ExampleDoc = {
  name: string,
  age: number
}
export type State = {
  queryData: ExampleDoc[] | null,
} 
export const useExampleStore = defineStore('expamle', {
  state: (): State => {
    return {
      queryData: null,
    }
  },
  actions: {
    async setup() {
      // Build query
      const store = getFirestore()
      const collectionRef = collection(store, 'Examples')
      const q = query(collectionRef, where('name', '==', 'wombat'))

      // Do the magic
      this.sync('queryData', q)
    }
  }
})

License

MIT