VUEX中Getter返回对象可正常查看但读取属性报undefined如何解决

报错原因 #

你的state.id初始值为空字符串，组件首次渲染时，obtenerArticuloPorId这个getter执行find操作找不到匹配的商品，会返回undefined，此时直接访问.nombre就会触发读取undefined属性的报错。
后续你触发obtenerId给state.id赋值后，getter才会返回正确的商品对象，但首次渲染的报错已经触发了。
而直接输出{{obtenerArticuloPorId}}不会报错，是因为模板渲染undefined时只会显示为空，不会触发属性读取错误。

解决方案 #

方法1：使用可选链操作符（推荐，Vue 3 原生支持） #

直接在模板里加可选链，避免读取undefined的属性：

{{ obtenerArticuloPorId?.nombre }}

如果用Vue2，需要先配置babel插件支持可选链语法。

方法2：增加条件渲染 #

用v-if判断商品对象存在后再渲染属性：

<template>
   <div class="popup" v-if="obtenerArticuloPorId">
       {{ obtenerArticuloPorId.nombre }}
   </div>
</template>

方法3：给Getter添加默认返回值 #

修改store里的getter，找不到商品时返回空对象，避免返回undefined：

getters: {
  obtenerArticuloPorId(state){
      const articulo=state.articulos.find(art=> art.id===state.id)
      return articulo || {}
  }
}

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