How to properly pre-fetch (init) data from api to storage

[vip9]

I would like to use Pinia as transparent data storage (cache?) for api data between routes/components. I would like to use storage with knowledge, that the data is ready, and not calling api every simple request.
I am currently using such code:

import { defineStore } from "pinia"
import useApi from "/@src/composable/useApi"

export const useCardsStore = defineStore("cards", {
  state: () => ({ internalCards: [] }),
  getters: {
    cards(state) {
      function fetchCards() {
        useApi()
          .get("cards")
          .then((result) => {
            state.internalCards = result.data.data
          })
      }

      if (state.internalCards.length < 1)
      {
        fetchCards();
      }
      return state.internalCards;
    }
  },
...

I would rather use "constructor" or implement some action: init() function, and use only "state" variables directly.
Instead of the getter + function + if statement combo.
What is good practice for prefetching data into storage? How to do it right?
Regards,
Piotr

[posva]

There is actually an example in the playground of this repo:

1. Use a composable that allows defining a cached request example
2. Use it inside of a setup store: https://github.com/posva/pinia/blob/v2/packages/playground/src/stores/nasa-pod.ts#L23