Pinia Getter使用filter过滤时出现undefined错误

看起来你遇到的问题是异步数据加载和组件同步渲染的时机不匹配导致的，我来帮你理一理：

问题根源 #

当你的组件初次渲染时，onMounted里的load_material异步请求还没完成，这时候state.material里还没有当前machine_id对应的数组，直接调用.filter()自然会抛出undefined的错误——总不能给一个不存在的东西调用方法对吧😅

解决方案：在Getter里先做存在性判断 #

只需要修改你的Getter，先检查state.material[machine_id]是否存在，不存在就返回空数组兜底，再执行过滤操作：

getters: {
  getReadyMaterial: (state) => {
    return (machine_id) => {
      // 先获取对应机器的物料数组，不存在则返回空数组
      const machineMaterials = state.material[machine_id] || [];
      // 再过滤出ready为true的项
      return machineMaterials.filter((m) => m.ready === true);
    };
  },
},

额外优化建议 #

如果你想在组件里也做一层防护（比如避免初始渲染时显示空数组的括号），可以在模板里结合v-if做友好提示：

<template>
  <div>
    Ready: 
    <span v-if="materialStore.getReadyMaterial(props.machine_id).length">
      {{ materialStore.getReadyMaterial(props.machine_id) }}
    </span>
    <span v-else>暂无已就绪物料</span>
  </div>
</template>

这样不管是异步请求完成前，还是某个机器确实没有物料数据，你的代码都能平稳运行，不会再抛出错误啦！

备注：内容来源于stack exchange，提问作者Bouni