Nuxt.js中使用Pinia时数据获取不及时的问题

核心问题排查 #

1. 响应性丢失：直接解构Pinia store的state属性（如const { templates } = useTemplateStore()）会导致响应性丢失，组件无法感知store中templates的更新。
2. 数据处理逻辑错误：你的flattenObj如果是提取Strapi返回的data数组，后续flattenData.meta会抛出错误（数组没有meta属性），导致this.templates无法赋值，控制台应该能看到相关报错。
3. 加载状态逻辑倒置：isLoadingTemplates的判断逻辑是templates.length > 0，这意味着数组有数据时才标记为加载中，完全逻辑倒置。
4. 组件未正确应用加载判断：你提到用了v-if判断，但给出的组件代码中没有在渲染列表的容器上添加该判断。

分步修复 #

1. 修正Pinia Store的getTemplates方法 #

先修复数据处理逻辑，确保正确提取Strapi的data数组和meta信息：

import { defineStore } from "pinia";

const useTemplateStore = defineStore("templates", {
    state: () => ({
        templates: [] as any[],
        totalTemplates: 0,
        selectedTemplate: null,
        isLoading: false // 添加加载状态到store
    }),
    actions: {
        async getTemplates(url: string) {
            this.isLoading = true; // 标记开始加载
            try {
                // 改用$fetch更直接，避免useFetch的ref包装问题
                const response = await $fetch(url);
                // Strapi响应结构是{ data: Array, meta: Object }
                if (response?.data) {
                    this.templates = response.data as any[];
                    this.totalTemplates = response.meta?.pagination?.total || 0;
                }
            } catch(err) {
                console.error("获取模板失败:", err);
                this.templates = []; // 出错时重置数组
            } finally {
                this.isLoading = false; // 标记加载结束
            }
        },
        setSelectedTemplate(template: any) {
            this.selectedTemplate = template;
        }
    },
});

export default useTemplateStore;

注：这里移除了flattenObj，直接处理Strapi的原始响应；如果你的flattenObj是为了处理单个模板的属性嵌套，可以单独对每个template做处理，而非整个响应对象。

2. 修正组件的响应性与加载逻辑 #

在组件中使用storeToRefs保持state的响应性，并正确处理加载状态：

<template>
    <!-- 根据store的isLoading展示加载中状态 -->
    <div v-if="isLoading" class="text-center py-5">
        <span class="spinner-border"></span>
        <p>加载模板中...</p>
    </div>
    <div v-else class="row mt-4">
        <!-- 当templates为空时提示无数据 -->
        <div v-if="templates.length === 0" class="col-12 text-center py-5">
            <p>暂无模板数据</p>
        </div>
        <div v-else v-for="template in templates"
            :key="template.id"
            class="col col-12 col-md-6 col-xl-4 col-xxxl-3 mb-4"
            >
            <TemplatesListaTemplatesCard :template="template" />
        </div>
        <div class="text-center">
            <button
                class="btn btn-sm btn-outline-primary btn-subtle radius-sm"
                @click="showMore"
                :disabled="templates.length >= totalTemplates"
                >
            Show More
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import useTemplateStore from "~~/store/template-store";
import { storeToRefs } from "pinia";
import { onMounted } from "vue";

const url = "http://localhost:1337/api/templates";
const store = useTemplateStore();
// 使用storeToRefs解构state属性，保持响应性
const { templates, totalTemplates, isLoading } = storeToRefs(store);
// action本身是响应式的，可直接解构
const { getTemplates } = store;

onMounted(async () => {
    await getTemplates(url);
});

// 示例showMore分页逻辑
const showMore = async () => {
    // 拼接分页参数，根据Strapi的分页规则调整
    const nextPageUrl = `${url}?pagination[page]=2&pagination[pageSize]=12`;
    await getTemplates(nextPageUrl);
};
</script>

3. 额外注意事项 #

• CORS配置：如果Strapi和Nuxt不在同一域名下，确保Strapi后台已配置CORS允许Nuxt的访问域名。
• SSR预加载：若使用Nuxt 3服务端渲染，可改用useAsyncData预加载数据，确保页面刷新时数据已就绪：

  useAsyncData('templates', async () => {
      await getTemplates(url);
  });
  

• 类型安全：尽量避免使用any类型，为templates定义专属接口，提升代码可维护性。

内容的提问来源于stack exchange，提问作者7ziip