本文旨在帮助开发者正确理解和使用 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
}
}
}上述代码存在以下问题：
立即学习“前端免费学习笔记（深入）”；
- filter 方法不会直接修改原数组。 filter 方法返回一个新的数组，需要将其赋值给 state.flights 才能更新 state。
- 直接修改 state 数组可能导致性能问题。 如果 flights 数组非常大，每次过滤都会创建一个新的数组，可能导致性能下降。
- 逻辑复杂，可读性差。 将过滤逻辑放在 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 的不可变性，提高性能，并提高代码的可读性和可维护性。同时，遵循良好的代码规范，可以使代码更加清晰和易于理解。
