Vuex带参数getter调用返回undefined、无法触发问题排查求助

1. 核心语法错误 #

你有两处语法错误导致getter无法正常工作：

• 带自定义参数的Vuex getter不可以直接把参数写在第二个形参位置：Vuex getter默认固定接收state、getters、rootState、rootGetters四个固定入参，要传自定义参数必须返回高阶函数，你后续修改的clientById: (state) => (id) => {}写法是正确的。
• 调用带参数的getter的语法错误：你写的this.$store.getters['clients/clientById', this.$route.params.id]是无效写法，方括号内的逗号运算符会直接取最后一个值，相当于你在用路由id作为key去getters对象中查找属性，自然返回undefined。

2. 正确写法 #

调用端修改 #

把computed里的返回值改成如下写法即可：

return this.$store.getters['clients/clientById'](this.$route.params.id);

相当于先从getters里拿到返回的高阶函数，再把id作为参数传入这个函数执行，就能拿到匹配的客户数据。

3. 其他问题排查 #

• 严格模式报错是你之前错误调用getter时，误访问了函数对象的arguments等受限属性导致的，修正调用语法后该报错会自动消失。
• 硬编码id也返回undefined的排查方向：
  • 确认你已经在页面加载前执行了dispatch('clients/fetchClients')拉取了真实客户数据，初始state里的clients默认只有id为null的空对象，无法匹配业务id
  • 路由参数的id默认是字符串类型，如果接口返回的客户id是数字类型，===全等判断会匹配失败，可以改成类型宽松判断client.id == id，或者统一转成数字再比较：client.id === Number(id)

实现思路说明 #

你当前的实现思路是正确的，属于Vuex的常规用法，优化建议是可以在页面加个loading判断，用clients/isLoading状态控制加载态，避免数据未拉取完成时页面展示空内容。

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