Proper order of Pinia and Axios Calls when called in components

I have a Vue SPA I built that has a bunch of datatables and userforms for enter data and this data is sent and pulled from a sql db. When i originally developed my vue application I did not use state management (pinia) to store any data but instead I just would call a axios query everytime on mount of a component and this would refresh each time the component is reloaded via vue-router. However, I am trying to take advantage of Pinia stores now so I could technically also call signalr requests in them to keep live data flowing to the store. However, on the initial load of my components where should I get the data from? Should I call the axios queries in my component on mount still, or on mount of the component should I call a function in the pinia store that does the axios query? Or is there some way for the pinia store to load the data by default ?

I am not sure what the correct approach is for how pinia, axios, and initial/continuing data loading should take place.

This is an opinion-based question, but I think everyone who starts using Pinia with Vue would ask. There will be no correct answer. I just want to share what I think is a good structure for a Vue project.

I always divide my application into tiers. Each tier communicates with another tier through an interface so we can easily switch between library/API without updating any code in the other tier.

   ---------------          --------------------          ---------------
   |     View    |          | State management |          |     API     |
   | ~~~~~~~~~~~ | <----->  | ~~~~~~~~~~~~~~~~ | <----->  | ~~~~~~~~~~~ |
   | .vue,       |          |   Pinia / Vuex   |          | axios/fetch |
   | composables |          |                  |          |             |
   |_____________|          |__________________|          |_____________| 

You might hear about the MVC design pattern before, so this pattern is something like it. We have 3 tiers View, State management, and API. The View tier gets data from the State Management tier. If the data exists, the State Management tier returns it. If the data does not exist, the State Management calls the API to retrieve it

Each tier communicates with another tier through an interface, in our case, it is just a function. Let says you want to build a product page, so you want to get the product by its handle. Now, in the State management tier, you define an action like this

// productStore.ts
getProductByHandle(handle: string) : Product {
 return API.getProductByHandle(handle)
}

In the API tier, you define a function like this:

// productAPI.ts
getProductByHandle(handle: string) : Product {
 return fetch('product-api-endpoint')
}

So no matter library you use, you have to keep the shape of these functions staying the same. The shape here is the input (handle) and the output (Product). If you can do it, you can switch between Pinia/Vuex, axios/fetch, or whatever you want without modifying other tier code