当前位置：首页 > 文章列表 > 文章 > 前端 > VuexMutations过滤数组方法

VuexMutations过滤数组方法

2025-08-26 20:28:07 0浏览收藏

还在为 Vuex Mutations 如何高效过滤数组数据而烦恼吗？本文将深入探讨 Vuex 中处理数组数据的正确姿势，着重讲解为何不推荐直接在 Mutations 中修改 State，以及如何利用 Getters 优雅地实现数据过滤，避免性能问题和代码维护难题。通过实际案例，我们将展示如何根据 `trip_class` 或 `number_of_changes` 等条件，使用 Getters 轻松过滤 `flights` 数组，并阐述 Getters 在保证 State 不可变性、提升性能和代码可读性方面的优势。此外，文章还将强调代码规范的重要性，助你写出更易于理解和维护的 Vuex 代码，提升你的 Vue 应用开发效率。

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
    }
  }
}

上述代码存在以下问题：

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 的不可变性，提高性能，并提高代码的可读性和可维护性。同时，遵循良好的代码规范，可以使代码更加清晰和易于理解。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《VuexMutations过滤数组方法》文章吧，也可关注golang学习网公众号了解相关技术文章。