VueJS setup方法竞态条件问题及全局状态初始加载方案咨询

一、优化App.vue的初始加载逻辑 #

不要在App.vue的setup里直接await loadInitial()，这会阻塞组件渲染。改成无阻塞异步调用，同时在Pinia store中维护加载状态，防止重复请求：

// 示例Pinia Store代码
export const useCharacterStore = defineStore('characters', {
  state: () => ({
    playerCharacters: [],
    characterSummaries: {},
    isInitialLoading: false,
    isSummaryLoading: {} // 记录单个角色的加载状态，避免重复请求
  }),
  actions: {
    async loadInitial() {
      if (this.isInitialLoading) return;
      this.isInitialLoading = true;
      try {
        this.playerCharacters = await api.getPlayerCharacters();
      } catch (err) {
        console.error('加载角色列表失败:', err);
      } finally {
        this.isInitialLoading = false;
      }
    },
    async loadCharacterInfo(characterId) {
      if (this.isSummaryLoading[characterId]) return;
      this.isSummaryLoading[characterId] = true;
      try {
        const summary = await api.getCharacterSummary(characterId);
        this.characterSummaries[characterId] = summary;
      } catch (err) {
        console.error(`加载角色${characterId}详情失败:`, err);
      } finally {
        this.isSummaryLoading[characterId] = false;
      }
    }
  }
})

App.vue中直接调用loadInitial()，同时在模板中添加加载提示：

<!-- App.vue -->
<template>
  <div v-if="store.isInitialLoading" class="loading">加载角色列表中...</div>
  <router-view v-else />
</template>

<script setup>
import { useCharacterStore } from '@/stores/characters';
const store = useCharacterStore();
store.loadInitial(); // 无阻塞调用，不影响页面渲染
</script>

二、解决HomeView的竞态问题 #

不要在setup中直接调用loadCharacterInfo，而是通过watch监听playerCharacters的变化，确保数据就绪后再触发详情请求：

<!-- HomeView.vue -->
<template>
  <div v-for="char in store.playerCharacters" :key="char.id">
    <h3>{{ char.name }}</h3>
    <div v-if="store.isSummaryLoading[char.id]">加载详情中...</div>
    <div v-else-if="store.characterSummaries[char.id]">
      {{ store.characterSummaries[char.id].description }}
    </div>
  </div>
</template>

<script setup>
import { useCharacterStore } from '@/stores/characters';
import { watch } from 'vue';

const store = useCharacterStore();

// 监听角色列表变化，批量加载未获取的详情
watch(
  () => store.playerCharacters,
  (newChars) => {
    if (newChars.length > 0) {
      newChars.forEach(char => {
        if (!store.characterSummaries[char.id]) {
          store.loadCharacterInfo(char.id);
        }
      });
    }
  },
  { immediate: true, deep: true } // 初始化时立即检查数据
);
</script>

通过watch确保只有当playerCharacters真正加载完成后才调用详情接口，彻底避免竞态问题；同时通过isSummaryLoading防止重复请求。

三、正确使用的场景 #

如果必须等待初始数据就绪才能渲染页面，可以用路由级别的，但需让组件返回Promise：

<!-- App.vue -->
<template>
  <Suspense>
    <template #default>
      <router-view />
    </template>
    <template #fallback>
      <div>全局加载中...</div>
    </template>
  </Suspense>
</template>

HomeView的setup中直接等待初始加载完成：

// HomeView.vue
const store = useCharacterStore();
await store.loadInitial();
store.playerCharacters.forEach(char => store.loadCharacterInfo(char.id));

这种方式会阻塞HomeView渲染，适合必须依赖初始数据的场景，不如无阻塞方案友好。

额外注意事项 #

• 所有异步action必须加错误处理，避免API请求失败导致状态卡住
• 通过store内的状态标记（如isInitialLoading）防止重复调用初始化接口
• 客户端渲染场景优先选择无阻塞加载方案，提升用户体验

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