Vuex带参Getter如何通过mapGetters传入路由获取的ID参数？

首先可以明确：完全可以将路由获取的id参数传入该getter使用，这种返回高阶函数的写法本身就是Vuex官方推荐的带参数Getter标准实现。

最优处理方式 #

你已经通过mapGetters完成了getter的映射，使用时可以根据场景选择以下两种方式：

1. 模板中直接调用 #

如果仅需要在模板中少量使用，直接把路由id作为参数传入映射后的getProjectById函数即可：

<template>
  <!-- 假设路由参数名为id，可直接传入调用 -->
  <div>当前项目名称：{{ getProjectById($route.params.id)?.projectName }}</div>
</template>

2. 封装为独立计算属性（更推荐） #

如果需要在组件的模板、方法中多次使用该项目数据，建议额外封装一个响应式计算属性，自动关联路由参数：

computed: {
  ...mapGetters(["currentUserPhoto","getProjectById"]),
  // 自动响应路由id变化，返回对应的项目数据
  currentProject() {
    // 可选加兜底逻辑，避免id不存在时返回undefined导致报错
    return this.getProjectById(this.$route.params.id) ?? {}
  }
},
methods: {
  demoMethod() {
    // 后续逻辑中直接调用即可，不需要重复传参
    console.log(this.currentProject)
  }
}

这种方式的优势是天然支持响应式：当路由id发生变化时，currentProject会自动重新计算获取对应项目数据，不需要额外监听路由变化。

内容的提问来源于stack exchange，提问作者Uğur Can