Vue中如何处理mapGetters首次渲染时的undefined错误

问题根源 #

你的store中assessments初始值是空数组[]，但实际API返回的是包含results数组的对象。页面首次渲染时，API请求还未完成，this.assessments还是空数组，此时访问this.assessments.results会触发undefined错误——因为数组不存在results属性。

解决方案 #

1. 修正Store初始值 #

把state里的assessments初始值改为包含空results数组的对象，确保无论API是否返回，results属性始终存在：

const state = {
    assessments: { results: [] }, // 改为带空results的对象
    assessment: {},
    inspections: []
}

2. 简化计算属性的空值处理 #

用ES6可选链操作符?.简化安全访问，避免冗长的if判断：

completedAssessments(){
  // 可选链确保assessments或results不存在时，返回空数组
  return this.assessments?.results?.filter(assessment => {
    const status = assessment.pre_pre_screening_status || 
                   assessment.pre_screening_status || 
                   assessment.car_care_status || 
                   assessment.inspection_status || 
                   assessment.pre_screening_plus_status;
    return status === "D" || status === "C";
  }) || [];
}

如果环境不支持可选链，用短路求值做兼容：

completedAssessments(){
  const results = (this.assessments && this.assessments.results) || [];
  return results.filter(assessment => {
    const status = assessment.pre_pre_screening_status || 
                   assessment.pre_screening_status || 
                   assessment.car_care_status || 
                   assessment.inspection_status || 
                   assessment.pre_screening_plus_status;
    return status === "D" || status === "C";
  });
}

3. 可选：添加加载状态优化体验 #

在store中新增加载状态，视图层根据状态显示加载提示，避免用户看到空白或错误：

// Store state新增
const state = {
    assessments: { results: [] },
    assessment: {},
    inspections: [],
    isAssessmentsLoading: false // 加载状态标记
}

// Store mutations新增
const mutations={
    // ...原有mutations
    setAssessmentsLoading(state, status){
        state.isAssessmentsLoading = status;
    }
}

// Store actions修改请求逻辑
const actions={
    async fetchAssessments({commit}){
        commit("setAssessmentsLoading", true);
        try {
            const res = await fetch(assesVehicleEndpoint); // 替换为你的API请求代码
            commit("setAssessments", res.data);
        } catch(err) {
            console.error("获取评估数据失败：", err);
        } finally {
            commit("setAssessmentsLoading", false);
        }
    },
    // ...原有actions
}

// Getters新增
const getters={
    // ...原有getters
    isAssessmentsLoading: state => state.isAssessmentsLoading
}

组件中映射并使用加载状态：

<template>
  <div v-if="isAssessmentsLoading">加载中...</div>
  <div v-else>
    <!-- 渲染completedAssessments内容 -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters({
      assessments: "assessments",
      isAssessmentsLoading: "isAssessmentsLoading"
    }),
    // ...你的completedAssessments计算属性
  },
  created() {
    this.$store.dispatch("fetchAssessments");
  }
}
</script>

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