Vue3 Composition API Vuex 路由:userId刷新后computed为undefined

• 类型不匹配是核心触发原因：动态路由的参数route.params.userId天生就是字符串类型，而Vuex中存储的用户列表里的id通常是数字类型。你在过滤逻辑里用严格相等===做判断，字符串值和数字值永远无法匹配，最终filter返回空数组，取[0]自然就是undefined。这也是为什么/路径下的else分支运行正常的原因——else分支对比的user.id和userProfile.value.id都是从Vuex里取的同类型值，不存在类型偏差，能正常匹配。
• 响应式设计存在缺陷：你写的const userId = computed(() => route.params.userId).value 本质是在setup执行的瞬间就把computed解包成了静态常量，不仅完全没必要套computed，还丢失了路由参数变化时的响应追踪能力。同时你在setup顶层拆分if分支创建computed的逻辑，没有把路由参数纳入computed的响应式依赖链，哪怕后续users列表完成异步加载，计算逻辑也无法正确捕获参数变化触发重算。
• 调试方式错误放大了问题感知：你在setup里直接console.log的是整个computed ref实例，不是它的计算值，正确的调试应该打印user.value。你看到的“undefined”输出，是ref对象的内部初始值，不是filter匹配后的真实结果。

setup() {
  const store = useStore()
  const route = useRoute()
  const router = useRouter()
  const userProfile = computed(() => store.state.userProfile)
  const users = computed(() => store.state.users)

  // 统一目标用户ID的响应式计算逻辑，同时做类型转换解决匹配问题
  const targetUserId = computed(() => {
    if (route.params.userId) {
      // 把字符串类型的路由参数转成和用户ID一致的类型
      return Number(route.params.userId)
    }
    return userProfile.value.id
  })

  // 统一user计算逻辑，自动追踪所有依赖的变化
  const user = computed(() => {
    // 用find替代filter取第一个匹配项，逻辑更简洁
    return users.value.find(item => item.id === targetUserId.value)
  })

  // 调试时取.value获取真实计算结果
  console.log('user', user.value)

  return {
    user
  }
}

刷新:userId路由时的加载时序问题也会被这个逻辑覆盖：哪怕setup执行时users列表还是空的，只要后续Vuex里的users加载完成、目标ID有值，computed就会自动重新计算出正确的用户对象。

内容的提问来源于stack exchange，提问作者Damian Wójcik