Vuex中无法通过getters访问article.statistic下的likes、views字段报错排查

为什么comments、tags可以正常访问，statistic读取报错 #

• 两层触发报错的原因叠加
  1. 初始状态的时序冲突：Vuex中article的初始值是空对象{}，组件首次渲染时，getArticleData的接口请求还处于pending状态，此时Vuex getters会立刻执行。原getter写法直接链式读取state.article.statistic.views，当state.article是空对象时，state.article.statistic本身就是undefined，在纯JS环境中直接读取undefined的属性会触发硬抛错，直接中断组件渲染。
     而评论组件的article.comments访问是写在Vue模板内的，模板编译逻辑对深层属性读取有静默容错：就算读取到undefined，也只会渲染空白内容，不会抛出阻断性错误，所以不会看到控制台报错。
  2. Laravel Resource的返回差异：你写的Resource逻辑里，statistic字段用了new StateResource($this->whenLoaded('state'))的写法。Laravel Resource的规则是：当whenLoaded检测到关联关系没有预加载时，会返回MissingValue类型的值，此时这个字段会被整个从接口响应中剔除。
     对比comments、tags字段的写法：用的是XxxResource::collection($this->whenLoaded('xxx'))，就算关联关系没加载，集合类型的Resource也会把空数组作为字段值返回，不会把字段从响应里删掉。这就导致如果接口查询时没预加载state统计关系，就算接口请求完成，返回的article对象里也根本不存在statistic这个key，前端再读这个属性永远是undefined。

• 给Vuex getters增加空值容错，避免初始空状态下的链式读取报错：
  修改getter的写法，逐层判断属性存在性，加兜底值，替代原来的裸读逻辑：

  getters: {
      articleLikes(state) {
          return state.article?.statistic?.likes ?? 0
      },
      articleViews(state) {
          return state.article?.statistic?.views ?? 0
      }
  }
  

• 对齐Laravel接口的预加载逻辑：在查询文章数据的控制器方法里，确认查文章时是否用->with(['comments', 'tags', 'state'])预加载了所有关联关系，避免statistic字段因为关联没加载被Resource直接剔除。如果确实不需要每次都返回统计字段，也要在前端逻辑里做好字段不存在的兜底。
• 可选优化：在浏览量展示组件外层增加渲染判断，等article核心数据加载完成后再渲染组件，比如给ViewsComponent加v-if="$store.state.article.id"，从源头上避免空状态下的属性读取。

内容的提问来源于stack exchange，提问作者Sergey S.