is the Vuex mutation written correctly?

Question

I wonder if the mutation method is written correctly and can modify the initial state array ? I'm not sure if the last lines of mutation method are written ok. Am I not missing anything ?

// Store 

state: {
  flights: [
    {trip_class: 0, number_of_change="1"},
    {trip_class: 1, number_of_change="2"},
    {trip_class: 1, number_of_change="1"}...
  ]
}           // expecting to filter the array

mutations: {
  setFilteredFlights: (state, data) => {
      // flight classes
      if (...) {
        state.flights.filter(
          (flight) =>
            flight.trip_class === data.selectedFlightClass ||
            flight.number_of_changes === data.selectedChanges
        );
      }
      //flight changes
      else if (...) {
        state.flights;                             // not sure about this line of code
      }
    },
}

Answer 1

flights is your main array that holds the flights objects. It would be much easier to just use a getter (or a couple of getters) to get your filtered data, without having to mutate the state.

getters: {
  getFlightsByTripClass: (state) => (tripClass) => {
    return state.flights.filter(flight => flight.trip_class === tripClass);
  }
}

To use this getter in your Vue component, you can access it using this.$store.getters:

computed: {
  filteredFlights() {
    return this.$store.getters.getFlightsByTripClass(1);
  }
}

Also, for good measure, make sure to follow the camel case convention for your variables. Use numberOfChange, instead of number_of_change.