当前位置： 技术文章>> Vue 项目如何使用 Vuex 的 getters 实现派生状态？

文章标题：Vue 项目如何使用 Vuex 的 getters 实现派生状态？
  • 文章分类: 后端
  • 9800 阅读

在Vue项目中，Vuex作为状态管理模式和库，为开发者提供了一种集中管理应用的所有组件的状态的方式。其中，getters是Vuex中一个非常有用的功能，它允许我们基于store中的state派生出一些状态，这些派生状态可以是计算属性、过滤后的列表或是任意形式的转换。使用getters，我们可以保持组件的轻量，并将复杂的状态逻辑封装在Vuex的store中，从而使得我们的应用更加模块化、易于维护。

一、理解Vuex Getters

首先，让我们明确什么是getters。在Vuex中，getters本质上类似于Vue组件中的计算属性（computed properties）。它们是基于state中的值进行计算的，并且这些值会随着state的变化而自动更新。但与计算属性不同的是，getters是全局的，它们可以被多个组件共享。

二、为何使用Getters

  1. 封装逻辑：将复杂的逻辑封装在getters中，可以使组件保持简洁，只关注展示逻辑，而不是如何计算或获取数据。
  2. 性能优化：getters的缓存机制可以确保只有当依赖的state发生变化时，getters才会重新计算，这有助于提升应用的性能。
  3. 代码复用：多个组件可能需要相同的派生状态，通过getters可以实现这一点的代码复用。

三、如何在Vuex中使用Getters

1. 定义Getters

在Vuex的store中，你可以在getters属性下定义getters。每个getter函数都会接收state作为第一个参数（如果getter函数需要依赖其他getter，可以接收第二个参数getters，但这在大多数情况下不是必需的）。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vuex', done: false },
      { id: 2, text: 'Visit CodePen', done: true },
      // ...
    ]
  },
  getters: {
    // 定义一个getter来获取未完成的todos
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    },
    // 定义一个getter来获取未完成的todos的数量
    doneTodosCount: (state, getters) => {
      // 注意：虽然这里传递了getters参数，但在这个例子中并未使用
      return getters.doneTodos.length;
    },
    // 另一个例子，计算所有todos的文本长度
    todosTextLength: state => {
      return state.todos.reduce((length, todo) => length + todo.text.length, 0);
    }
  }
});

2. 在组件中使用Getters

在Vue组件中，你可以通过this.$store.getters来访问store中的getters，或者如果你使用了Vuex的mapGetters辅助函数，可以更方便地在组件的computed属性中引用getters。

使用this.$store.getters
<template>
  <div>
    <p>Done Todos Count: {{ doneTodosCount }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    doneTodosCount() {
      return this.$store.getters.doneTodosCount;
    }
  }
}
</script>
使用mapGetters
<template>
  <div>
    <p>Done Todos Count: {{ doneTodosCount }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'doneTodosCount'
    ])
  }
}
</script>

四、高级用法

1. Getters的链式调用

由于getters可以返回任何值，包括其他getters的返回值，因此你可以链式调用getters来构建更复杂的派生状态。

getters: {
  // 假设我们有一个getter来获取所有todos
  allTodos: state => state.todos,
  // 现在我们可以基于allTodos来获取未完成的todos
  doneTodos: (state, getters) => getters.allTodos.filter(todo => todo.done),
  // 进一步的，我们可以基于doneTodos来计算完成的百分比
  doneTodosPercentage: (state, getters) => {
    const totalTodos = getters.allTodos.length;
    const doneTodos = getters.doneTodos.length;
    return (doneTodos / totalTodos) * 100;
  }
}

2. 使用mapGetters时传递命名空间

如果你的store是模块化的，并且getters有命名空间，你可以在使用mapGetters时指定命名空间。

// 假设你有一个名为'todo'的模块
const moduleA = {
  // ...
  getters: {
    // ...
    doneTodos: (state) => { /* ... */ }
  }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
});

// 在组件中使用带命名空间的getters
export default {
  computed: {
    ...mapGetters('a', ['doneTodos'])
  }
}

五、实战案例：在码小课网站中的应用

假设你正在为码小课网站开发一个课程列表页面，你需要显示所有课程，但用户可能只对未完成的课程感兴趣。在这种情况下，你可以使用Vuex的getters来管理这个状态。

  1. 定义State：在Vuex的store中，定义一个包含所有课程信息的state。

  2. 定义Getters：基于这个state，定义一个getter来获取所有未完成的课程。

const store = new Vuex.Store({
  state: {
    courses: [
      { id: 1, title: 'Vuex基础', completed: false },
      { id: 2, title: 'Vue Router深入', completed: true },
      // ...
    ]
  },
  getters: {
    // 获取所有未完成的课程
    incompleteCourses: state => {
      return state.courses.filter(course => !course.completed);
    }
  }
});
  1. 在组件中使用Getter：在你的课程列表组件中，使用mapGetters来引入incompleteCourses getter，并在模板中展示这些课程。
<template>
  <div>
    <h2>未完成的课程</h2>
    <ul>
      <li v-for="course in incompleteCourses" :key="course.id">{{ course.title }}</li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['incompleteCourses'])
  }
}
</script>

通过这样的方式，你不仅保持了组件的简洁性，还将状态管理的逻辑集中在了Vuex的store中，使得代码更加模块化和易于维护。同时，由于getters的缓存机制，当courses状态发生变化时，incompleteCourses会自动更新，而无需你手动编写任何更新逻辑。

结语

在Vue项目中，Vuex的getters是处理派生状态的重要工具。它们不仅可以帮助你封装复杂的逻辑，还可以提高应用的性能和可维护性。通过合理使用getters，你可以构建出更加模块化、可复用的Vue应用。在码小课网站的开发过程中，不妨尝试将getters应用于你的状态管理，看看它能如何帮助你提升开发效率和代码质量。

推荐文章