当我的Vue应用程序第一次加载时，我正试图从我的Pinia商店加载产品。
这是我的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")

这是我的店

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,
});

我想在应用程序加载时调用getProducts。我可以使用Vue2来执行此操作，但不确定如何使用新的合成API版本的Vue来执行此操作。请有人告诉我如何执行此操作？