Vue3+Pinia异步初始化状态仅在组件二次进入时生效问题求助

你猜的没错，问题根源就是Pinia Store的异步初始化时机晚于组件挂载。你在Store里用了Vue的onMounted钩子，但这个钩子是和组件生命周期绑定的——只有当第一个使用该Store的组件完成挂载后，onMounted才会执行异步请求。而你的组件在挂载时直接把Store的products值赋值给了自己的ref，这时候请求还没返回，所以products是空数组，自然显示loading。当你跳转再返回时，Store已经完成了异步请求，数据已经存在，所以能正常展示。

方案1：修改Store初始化逻辑，脱离组件生命周期 #

把Store里的异步初始化逻辑从onMounted移出来，改成Store创建时主动触发请求，同时添加loading状态方便组件判断：

import { ref } from "vue";
import { defineStore } from "pinia";
import { TProduct, TProductResponse } from "@types";
import { fetchData } from "@utils";

export const useProductsStore = defineStore("products", async () => {
  const products = ref<TProduct[]>([]);
  const isLoading = ref(true);

  async function setProducts() {
    try {
      products.value = (await fetchData<TProductResponse>("https://dummyjson.com/products?limit=5")).products;
    } finally {
      isLoading.value = false;
    }
  }

  // Store创建时立即执行初始化请求
  await setProducts();

  return {
    products,
    isLoading
  };
});

方案2：组件主动触发初始化，保持响应式跟踪 #

如果不想在Store创建时就请求数据，可在组件中主动调用初始化方法，同时用computed跟踪Store状态的变化（避免一次性赋值丢失响应式）：

修改后的Store #

import { ref } from "vue";
import { defineStore } from "pinia";
import { TProduct, TProductResponse } from "@types";
import { fetchData } from "@utils";

export const useProductsStore = defineStore("products", () => {
  const products = ref<TProduct[]>([]);
  const isLoading = ref(false);

  async function setProducts() {
    if (products.value.length > 0) return; // 避免重复请求
    isLoading.value = true;
    try {
      products.value = (await fetchData<TProductResponse>("https://dummyjson.com/products?limit=5")).products;
    } finally {
      isLoading.value = false;
    }
  }

  return {
    products,
    isLoading,
    setProducts
  };
});

修改后的组件 #

<script setup lang="ts">
import { computed, onMounted } from "vue";
import { ProductCard } from "@components";
import { TProduct } from "@types";
import { useProductsStore } from "@stores";

const productsStore = useProductsStore();
// 用computed响应式跟踪Store的products状态
const products = computed<TProduct[]>(() => productsStore.products);

// 组件挂载时主动触发数据初始化
onMounted(async () => {
  await productsStore.setProducts();
});
</script>

<template>
  <div v-if="productsStore.isLoading">Loading...</div>
  <div v-else>
    <ProductCard v-for="product in products" :key="product.id" :product="product" />
  </div>
</template>

关键注意点 #

• 不要在Store中使用Vue的组件生命周期钩子（如onMounted）初始化全局数据，这类钩子依赖于使用Store的组件，执行时机不可控。
• 组件中不要直接把Store的ref赋值给本地ref，会丢失响应式连接——应该用computed直接引用，或使用Pinia的storeToRefs工具解构响应式状态。
• 始终添加isLoading状态，既给用户明确反馈，也能避免重复发起请求。

内容的提问来源于stack exchange，提问作者Achraf FAWZI