Vuex中getters返回数组调用filter报错：不是函数，原因是什么？

在填写出发地、目的地输入框并使用下拉选择器筛选航班后，出现报错：this.flights.filter is not a function。尽管flights来自Vuex的getters且预期为数组类型，但仍触发该错误，请问遗漏了什么？

相关代码 #

computed: {
    flights() {
      return this.$store.getters.getFlights;
    },
    // 筛选航班舱型用于选择器
    flightsClasses() {
      return this.flights.filter((item, index, objects) => {
        if (index === 0) {
          return item;
        } else if (item.trip_class !== objects[index - 1].trip_class) {
          return item;
        }
      }).sort(function(a, b){return a-b});
    },
  }

排查与解决 #

• 确认Vuex getter返回值类型：报错核心是this.flights并非数组，说明在筛选操作后，Vuex中flights状态被意外修改为非数组类型（比如对象、undefined/null）。检查store的mutations/actions，看筛选逻辑是否错误改变了数据结构，比如将数组替换成了单个对象或其他类型。
• 添加类型兜底与修复逻辑漏洞：原代码存在两处逻辑问题，同时需增加类型校验避免报错：

  flightsClasses() {
    // 先确保flights是有效数组，非数组则返回空数组
    const validFlights = Array.isArray(this.flights) ? this.flights : [];
    return validFlights.filter((item, index, objects) => {
      if (index === 0) {
        return true; // filter回调需返回布尔值，原返回item会被转为布尔值，逻辑不严谨
      }
      return item.trip_class !== objects[index - 1].trip_class;
    }).sort((a, b) => a.trip_class - b.trip_class); // 原sort的a-b无效，需针对trip_class字段排序
  }
  

• 检查筛选组件的状态更新：查看筛选相关组件的逻辑，确认触发筛选时，是否错误地将Vuex中的flights替换为非数组值，比如筛选后返回了单个结果而非过滤后的数组。

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