Pinia异步加载数据后，组件判断ID存在性的优化方案求助

方法1：等待异步Action执行完成 #

你的fetchUserFavorites是异步操作，组件调用时直接判断会因为请求未完成拿到空集合。最直接的方式是await这个Action，确保数据加载完成后再执行判断：

import { useFavoritesStore } from '@/stores/favorites'
import { ref, onMounted } from 'vue'

export default {
  props: ['itemId'],
  setup(props) {
    const favoritesStore = useFavoritesStore()
    const isFav = ref(false)

    const checkFavoriteStatus = async () => {
      // 等待异步请求完成，数据存入state
      await favoritesStore.fetchUserFavorites()
      // 此时getter已拿到完整数据
      isFav.value = favoritesStore.getFavoriteIds.has(props.itemId)
    }

    onMounted(() => {
      checkFavoriteStatus()
    })

    return { isFav }
  }
}

方法2：用计算属性响应Getter变化 #

利用Vue的响应式特性，把isFav定义为计算属性，让它自动依赖Pinia的getFavoriteIds。当异步请求完成、state更新后，getter会自动触发计算属性重新计算：

import { useFavoritesStore } from '@/stores/favorites'
import { computed, onMounted } from 'vue'

export default {
  props: ['itemId'],
  setup(props) {
    const favoritesStore = useFavoritesStore()

    // 计算属性会自动响应getter的变化
    const isFav = computed(() => {
      return favoritesStore.getFavoriteIds.has(props.itemId)
    })

    onMounted(() => {
      // 触发数据加载，无需等待，响应式会自动处理后续更新
      favoritesStore.fetchUserFavorites()
    })

    return { isFav }
  }
}

为什么不推荐用setTimeout？ #

setTimeout属于“猜时机”的方案：设置的时间太短可能请求还没完成，依然拿到错误结果；时间太长则会让用户等待不必要的时长，体验糟糕。而且这种写法破坏了响应式逻辑，代码维护性差。

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