Vuex Mutations 正确使用指南：过滤 State 中的数组数据

本文旨在帮助开发者正确理解和使用 Vuex mutations 来处理 state 中的数组数据，尤其是在需要过滤数据时。我们将探讨为什么直接在 mutation 中修改 state 可能不是最佳实践，并介绍如何使用 getters 来更有效地实现数据过滤。同时，我们也会强调代码规范的重要性，以提升代码可读性和维护性。

Vuex Mutations 的正确使用姿势

Vuex 的核心思想之一是单向数据流，强调 state 的不可变性。Mutations 是修改 state 的唯一途径，必须是同步函数。然而，直接在 mutation 中对 state 进行复杂操作，尤其是过滤数组，可能会导致代码难以维护和调试。

考虑以下场景：我们需要根据 trip_class 或 number_of_changes 过滤 flights 数组。

// 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) => {
// 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
}
}
}

上述代码存在以下问题：

立即学习“前端免费学习笔记（深入）”；

1. filter 方法不会直接修改原数组。 filter 方法返回一个新的数组，需要将其赋值给 state.flights 才能更新 state。
2. 直接修改 state 数组可能导致性能问题。 如果 flights 数组非常大，每次过滤都会创建一个新的数组，可能导致性能下降。
3. 逻辑复杂，可读性差。 将过滤逻辑放在 mutation 中，会使 mutation 变得复杂，难以理解和维护。

使用 Getters 进行数据过滤

更推荐的做法是使用 getters 来进行数据过滤。Getters 类似于 computed properties，可以根据 state 计算出新的值，而不会直接修改 state。

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

上述代码定义了一个名为 getFlightsByTripClass 的 getter，它接收一个 tripClass 参数，并返回 flights 数组中所有 trip_class 等于 tripClass 的 flight 对象。

在 Vue 组件中使用 getter：

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

这样，filteredFlights computed property 就会根据 tripClass 的值动态地过滤 flights 数组，而不会直接修改 state。

优势

使用 Getters 进行数据过滤的优势：

• 不直接修改 state： 保证了 state 的不可变性，符合 Vuex 的设计原则。
• 提高性能： Getters 会缓存计算结果，只有当依赖的 state 发生变化时才会重新计算，避免了不必要的性能开销。
• 提高代码可读性和可维护性： 将过滤逻辑放在 getters 中，使代码更加清晰和易于理解。

代码规范

除了使用 getters 之外，遵循良好的代码规范也很重要。例如，使用驼峰命名法来命名变量，可以提高代码的可读性。

// 推荐
numberOfChange
// 不推荐
number_of_change

总结

在 Vuex 中，Mutations 用于同步修改 state，而 Getters 用于从 state 中派生出新的值。当需要过滤 state 中的数组数据时，推荐使用 Getters，这样可以保证 state 的不可变性，提高性能，并提高代码的可读性和可维护性。同时，遵循良好的代码规范，可以使代码更加清晰和易于理解。