Unable to incorporate store data in component

[KayJay89]

Hi all

I have been exploring Pinia together with Vue 3 Comp API as I am trying to build a small app I have created in Vue 2 with Options API + Vuex to learn Pina, Vue 3 & the Comp API. It's not been going quite as smooth as I would have hoped and I am completely stuck for some days now on trying to find a way to get my store data in my components.

// parkings.js

import { defineStore } from 'pinia'
import { fetchParkings, fetchOccupancyByParkingId } from '../api/parkings.api'

export const useParking = defineStore({
  id: 'parkingStore',

  state: () => ({
    parkings: [],
  }),
  actions: {
    async fetchParkingsData() {
      await fetchParkings()
        .then((res) => {
          this.parkings = res.data.sort((a, b) => (a.name > b.name ? 1 : -1))
        })
        .then(() => {
          this.parkings.map((parking) => {
            return fetchOccupancyByParkingId(parking.id).then((res) => {
              parking['occupancy'] = res.data[0]
            })
          })
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
  getters: {
    getParkings: (state) => state.parkings,
  },
})

<!-- Home.vue -->

<template>
  <main class="container mx-auto lg:px-36">
    <div class="px-5 mx-auto pb-7">
      <h2
        class="text-gray-400 text-3xl font-bold text-center tracking-wide py-6"
      >
        Car Parks
      </h2>
    </div>

    <p v-for="parking in parkings" :key="parking.id" class="mb-10">
      {{ parking }}
    </p>

  </main>
</template>

<script>
import { defineComponent, computed } from 'vue'
import ParkingCard from '@/components/ParkingCard.vue'
import { useParking } from '@/stores/parking.js'

export default defineComponent({
  components: { ParkingCard },

  setup() {
    const store = useParking()

    store.fetchParkingsData()

    return {
      parkings: computed(() => store.parkings),
    }
  },
})
</script>

The above works. I have 10 car parks' data and 10 paragraphs being generated with the data. When I try to pass on the data as a prop in my component, things start to change.

<!-- Home.vue -->

<template>
  <main class="container mx-auto lg:px-36">
    <div class="px-5 mx-auto pb-7">
      <h2
        class="text-gray-400 text-3xl font-bold text-center tracking-wide py-6"
      >
        Car Parks
      </h2>
    </div>


    <ParkingCard
      v-for="parking in parkings"
      :key="parking.id"
      :parking="parking"
    />
  </main>
</template>

<script>
import { defineComponent, computed } from 'vue'
import ParkingCard from '@/components/ParkingCard.vue'
import { useParking } from '@/stores/parking.js'

export default defineComponent({
  components: { ParkingCard },

  setup() {
    const store = useParking()

    store.fetchParkingsData()

    return {
      parkings: computed(() => store.parkings),
    }
  },
})
</script>

When I just pass on the props and put {{parking}} somewhere in the div, it works fine. I see all the data I need, including occupancy. But when I try to access {{parking.occupancy}}, I am seeing a lot of errors:

The above errors appear for each and every single parking that is being returned, usually.

The undefined error makes me think it has something to do with the data not being available when it tries to access it but I can't seem to find a solution to that, if it is the problem at all.

I'd be very happy if anyone could help me out here. If this is not a Pinia issue, I definitely apologize and will take this up over at vue-next instead.

Edit:
My ParkingCard component for completion sake:

<template>
  <div>
     {{ parking }} <!-- works -->
     {{ parking.occupancy }} <!-- triggers errors/warnings as seen above  -->
  </div>
</template>
<script>
import { defineComponent, toRefs } from 'vue'

export default defineComponent({
  name: 'ParkingCard',
  components: { },
  data() {
    return {}
  },
  props: { parking: Object },
  setup(props) {
    const { parking } = toRefs(props)

    return {
      parking,
    }
  },
})
</script>

[posva]

From the code I can't tell what's wrong. Do you have a boiled down reproduction on codesandbox? (you can use the demo link)

BTW It shouldn't change anything but you probably want to write

function fetchParkingsData() {
  return fetchParkings()
    .then((res) => {
      this.parkings = res.data.sort((a, b) => (a.name > b.name ? 1 : -1))
    })
    .then(() => {
      return Promise.all(
        this.parkings.map((parking) => {
          return fetchOccupancyByParkingId(parking.id).then((res) => {
            parking['occupancy'] = res.data[0]
          })
        })
      )
    })
    .catch((err) => {
      console.log(err)
    })
}

to await all of the extra fetches