kazuooooo

declare module 'pinia' {
  export interface PiniaCustomProperties<Id, S, G, A> {
    sync(key: string, ref: DocumentReference): Unsubscribe
    sync(key: string, ref: CollectionReference): Unsubscribe
    sync(key: string, ref: Query): Unsubscribe
  }
}

kazuooooo

store.sync = (key, ref) => {
  // Document
  if (ref instanceof DocumentReference) {
    return onSnapshot(ref, (ds) => {
      if (ds.exists()) {
        store.$patch({ [key]: ds.data() })
      }
    })
  }

kazuooooo

import { CollectionReference, DocumentReference, onSnapshot, Query, Unsubscribe } from "firebase/firestore";
import { PiniaPluginContext } from "pinia";

export const PiniaFirestoreSync = ({ store }: PiniaPluginContext) => {
  store.sync = (key, ref) => {
    // Document
    if (ref instanceof DocumentReference) {
      return onSnapshot(ref, (ds) => {
        if (ds.exists()) {
          store.$patch({ [key]: ds.data() })

kazuooooo

import { PiniaPluginContext } from "pinia";

// Plugin
const magicNumPlugin = ({ store }: PiniaPluginContext) => {
  store.magicNumber = 5
}

// Typing
declare module 'pinia' {
  export interface PiniaCustomProperties {

kazuooooo

import { collection, getFirestore, query, where } from "firebase/firestore"
import { defineStore } from "pinia"

type ExampleDoc = {
  name: string,
  age: number
}
export type State = {
  queryData: ExampleDoc[] | null,
}

kazuooooo

this.sync(
  'queryData' // Property name of State
   query      // Query
)

kazuooooo

import { collection, getFirestore } from "firebase/firestore"
import { defineStore } from "pinia"

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

export type State = {
  collectionData: ExampleDoc[] | null,

kazuooooo

this.sync(
  'collectionData' // State property name of State
   collectionRef   // Collection Reference
)

kazuooooo

import { doc, getFirestore } from "firebase/firestore"
import { defineStore } from "pinia"

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

export type State = {
  docData: ExampleDoc | null,

kazuooooo

import { doc, getFirestore } from "firebase/firestore"
import { defineStore } from "pinia"

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

export type State = {
  docData: ExampleDoc | null,