Vuex中的mutation写法是否正确？能否修改初始状态数组？

首先明确：Vuex的Mutation是唯一允许直接修改state的地方，你要修改state里的flights数组的需求完全可以通过Mutation实现，但当前代码存在几个关键问题，需要修正：

代码里的核心问题 #

• 对象语法错误：state中flights数组的对象属性用了=赋值，这是JS对象字面量的语法错误，应该改成冒号:，比如number_of_change: "1"。
• filter方法未赋值：Array.filter()只会返回新数组，不会修改原数组，你现在只是调用了filter但没把结果赋值给state.flights，等于没有修改state。
• else if分支空操作：state.flights;这行代码没有任何实际作用，属于无效代码。
• 过滤逻辑与判断条件缺失：if (...)和else if (...)里的判断条件没有明确内容，另外filter里的||逻辑是“满足舱位或中转次数任一条件”，如果你的需求是同时满足两个条件，需要改成&&。

修正后的示例代码 #

// Store 
state: {
  flights: [
    {trip_class: 0, number_of_change: "1"},
    {trip_class: 1, number_of_change: "2"},
    {trip_class: 1, number_of_change: "1"}
  ]
},

mutations: {
  setFilteredFlights: (state, data) => {
      // 示例逻辑：根据选中的舱位或中转次数分别过滤
      if (data.selectedFlightClass !== undefined) {
        // 将filter返回的新数组赋值给state.flights，完成state修改
        state.flights = state.flights.filter(
          flight => flight.trip_class === data.selectedFlightClass
        );
      }
      else if (data.selectedChanges !== undefined) {
        state.flights = state.flights.filter(
          flight => flight.number_of_change === data.selectedChanges
        );
      }
      // 若需多条件同时过滤，可调整逻辑：
      // else if (data.selectedFlightClass && data.selectedChanges) {
      //   state.flights = state.flights.filter(
      //     flight => flight.trip_class === data.selectedFlightClass && flight.number_of_change === data.selectedChanges
      //   );
      // }
    },
}

额外注意事项 #

• 如果你需要保留原始的flights数据（避免过滤后无法恢复），建议在state中新增filteredFlights字段专门存储过滤结果，原始flights作为数据源保留。
• Mutation必须是同步函数，不能在里面写异步逻辑（比如接口请求），异步操作要放在Action中，再由Action触发Mutation。

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