Nuxt中如何向Vuex的getters传递$route.params.id类型参数

问题原因 #

• 参数类型不匹配
  路由参数$route.params.id默认是字符串类型，比如你路由中配置的id是1，实际取到的值是字符串"1"。如果state.blogs里存储的blog.id是数字类型，即便用==做隐式转换，遇到参数带多余空格、特殊字符或者数字位数补零的场景，依然会出现匹配失败的情况。
• store数据加载时机滞后
  如果你的state.blogs是通过异步接口请求获取的，组件created生命周期执行时，接口还没返回数据，state.blogs是空数组，find方法自然返回undefined。你后续直接传数字测试时，接口已经返回了数据，所以能正常匹配。

解决方案 #

处理参数类型不匹配 #

方案1：调用getter前先把参数转成数字类型

created() {
  const blogId = Number(this.$route.params.id);
  console.log(blogId, typeof blogId); // 可打印确认类型为number
  this.blog = this.$store.getters.getBlogById(blogId);
  console.log(this.blog);
},

方案2：直接修改getter判断逻辑，统一类型后再比较，兼容性更强

const getters = {
  allBlogs: state => state.blogs,
  getBlogById: (state) => (id) => {
    // 统一转成字符串做严格比较，适配数字、字符串两种入参
    return state.blogs.find(blog => String(blog.id) === String(id))
  }
}

处理异步数据加载问题 #

如果blogs是异步获取的，推荐用计算属性结合监听的方式处理，确保数据更新后自动重新匹配：

computed: {
  blog() {
    return this.$store.getters.getBlogById(Number(this.$route.params.id))
  }
},
// 路由参数变化时自动重新匹配
watch: {
  '$route.params.id'() {
    // 无需额外赋值，计算属性会自动更新
  }
}

也可以选择在异步请求返回blogs数据之后，再执行匹配逻辑。

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