Using nuxt-vuefire with Pinia

[chiuwah]

Hi all, I am pulling data from Firestore database into Pinia using nuxt-vuefire. But the data is put into the array within the first element of that array. The data should fill the array. What am I doing wrong?

import { defineStore } from 'pinia';
import { collection } from 'firebase/firestore';
import { useFirestore, useCollection, usePendingPromises } from "vuefire";

export const useRecipientsStore = defineStore('recipients', {
    state: () => ({
        recipients: [],
    }),
    getters: {
    },
    actions: {
        async initialize() {
            console.log("initializing recipients")
            const db = useFirestore();
            const recipientsRef = collection(db, 'recipients');
            const { pending } =  useCollection(recipientsRef, { target: this.recipients });
            await usePendingPromises();
            console.log(this.recipients);
        }
    },
})

This is the result of 'recipients':

[
  [
    {
      "lastName": "Musk",
      "company": "Twitter Inc.",
      "firstName": "Elon"
    }
  ]
]

it should be:

[
    {
      "lastName": "Musk",
      "company": "Twitter Inc.",
      "firstName": "Elon"
    }
]

[chiuwah]

Sorry, I should have read the documentation better. Turns out that I could directly use useCollection on the state. The state gets updated automatically once data is fetched from firestore.

[Picturk]

Can you post your working code please? It would be super helpful.

[chiuwah]

This example is from the documentation:

import { defineStore } from 'pinia'

export const useTodoStore = defineStore('todos', () => {
  const todos = useCollection(todoListRef)
  
  return { todos }
})

Don't forget to use storeToRefs in the pages, otherwise it would break reactivity.