How to load the store in vue when the app first loads

I am trying to load products from my pinia store when my Vue app first loads.

This is my app.js

import {createApp} from "vue";
import App from "./App.vue";
import router from "./Router/index";
import { createPinia } from "pinia";

createApp(App)
    .use(router)
    .use(createPinia())
    .mount("#app")

And this is my store:

import { defineStore } from "pinia";
import axios from "axios";

const state = {
    cart: [],
    order: {},
    customer: {},
    loading: true,
    error: null,
    products: [],
};

export const useCartStore = defineStore("shopState", {
    state: () => state,
    actions: {
        async getProducts() {
            try {
                this.loading = true;
                const response = await axios.get("/api/product");
                this.products = response.data.data;
                this.loading = false;
            } catch (error) {
                this.error = error;
            }
        },
        addToCart({ item }) {
            const foundProductInCartIndex = this.cart.findIndex(
                (cartItem) => item.slug === cartItem.slug
            );

            if (foundProductInCartIndex > -1) {
                this.cart[foundProductInCartIndex].quantity += 1;
            } else {
                item.quantity = 1;
                this.cart.push(item);
            }
        },
        removeProductFromCart({ item }) {
            this.cart.splice(this.cart.indexOf(item), 1);
        },
        clearCart() {
            this.cart.length = 0;
        },
        clearCustomer() {
            this.customer = {};
        },
        clearOrder() {
            this.order = {};
        },
        updateCustomer(customer) {
            this.customer = customer;
        },
        updateOrder(order) {
            this.order = order;
        },
        getSingleProduct(slug) {
            return this.products.find((product) => product.slug === slug);
        },
    },
    getters: {
        getCartQuantity() {
            return this.cart.reduce(
                (total, product) => total + product.quantity,
                0
            );
        },
        getOrderDetails() {
            return this.order;
        },
        getCartContents() {
            return this.cart;
        },
        getCustomer() {
            return this.customer;
        },
        getCartTotal() {
            return this.cart.reduce(
                (total, product) => total + product.price * product.quantity,
                0
            );
        },
    },
    persist: true,
});

I would like to call getProducts when the app loads. I am able to do this using Vue2 but not sure how to do this with the new composition API version of Vue. Please can someone advise how I can do this?

If you want to load the products once the app is loaded, you can use the onMounted() hook in the composition API.

https://vuejs.org/api/composition-api-lifecycle.html#onmounted

On the component where you want to load the products:

<script setup>
import { onMounted } from 'vue';
import { useCartStore } from '../stores/storeName.js';
const store = useCartStore()
onMounted(() => {

store.getProducts()
})
</script>

Note: I'm using <script setup> here. But if you're using the setup() hook you need to manually return the function

https://vuejs.org/api/composition-api-setup.html