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,

kazuooooo

this.sync(
  'docData', // Document Dataと同期させたいpiniaのプロパティ名
   docRef    // Document Reference
)

kazuooooo

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

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

kazuooooo

npm install pinia-plugin-firestore-sync

kazuooooo

async setup() {
  // Yay🙌
  this.sync('docDataA', docRefA)
  this.sync('docDataB', docRefB)
  this.sync('docDataC', docRefC)
}

kazuooooo

async setup() {
  // It's very vervose...
  onSnapshot(docRefA, (ds) => {
    if (ds.exists()) {
      this.$patch({ docDataA: ds.data() })
    }
  })
  onSnapshot(docRefB, (ds) => {
    if (ds.exists()) {
      this.$patch({ docDataB: ds.data() })

kazuooooo

export const useExampleStore = defineStore('expamle', {
  state: {/*...*/}
  actions: {
    async setup() {
      // ...
      //🌟 Sync Pinia's state and Firestore document
      onSnapshot(docRef, (ds) => {
        if (ds.exists()) {
          this.$patch({ docData: ds.data() })
        }

kazuooooo

export const useExampleStore = defineStore('expamle', {
  state: {/*...*/}
  actions: {
    async setup() {
      // ...
      //🌟 docDataとdocRefを同期
      onSnapshot(docRef, (ds) => {
        if (ds.exists()) {
          this.$patch({ docData: ds.data() })
        }

kazuooooo

{"lastUpload":"2021-08-19T09:12:09.549Z","extensionVersion":"v3.4.3"}