Vuex怎么获取getter对象中的值

Vuex 是 Vue.js 的官方状态管理库，用于在 Vue 应用中集中管理组件的共享状态。在 Vuex 中，getter 是一个非常重要的概念，它允许我们从 store 中派生出一些状态，类似于 Vue 组件中的计算属性。本文将详细介绍如何在 Vuex 中获取 getter 对象中的值，并探讨一些常见的应用场景和最佳实践。

1. Vuex 中的 Getter 简介

在 Vuex 中，getter 是一个用于从 store 中获取派生状态的方法。它类似于 Vue 组件中的计算属性，但不同的是，getter 是全局的，可以在任何组件中使用。getter 可以接收 state 作为第一个参数，也可以接收其他 getter 作为第二个参数。

1.1 定义 Getter

在 Vuex 中定义 getter 非常简单，只需要在 store 的 getters 对象中添加一个方法即可。例如：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vuex', done: true },
      { id: 2, text: 'Build an app', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length;
    }
  }
});

在上面的例子中，我们定义了两个 getter：doneTodos 和 doneTodosCount。doneTodos 返回所有已完成的任务，而 doneTodosCount 返回已完成任务的数量。

1.2 获取 Getter 的值

在 Vue 组件中，我们可以通过 this.$store.getters 来访问 getter 的值。例如：

export default {
  computed: {
    doneTodos() {
      return this.$store.getters.doneTodos;
    },
    doneTodosCount() {
      return this.$store.getters.doneTodosCount;
    }
  }
};

在上面的代码中，我们通过 this.$store.getters.doneTodos 和 this.$store.getters.doneTodosCount 分别获取了 doneTodos 和 doneTodosCount 的值，并将它们映射到组件的计算属性中。

2. 使用 mapGetters 辅助函数

为了简化在组件中获取 getter 的过程，Vuex 提供了一个 mapGetters 辅助函数。这个函数可以将 getter 映射到组件的计算属性中，从而减少重复代码。

2.1 基本用法

首先，我们需要在组件中引入 mapGetters：

import { mapGetters } from 'vuex';

然后，我们可以使用 mapGetters 将 getter 映射到组件的计算属性中：

export default {
  computed: {
    ...mapGetters([
      'doneTodos',
      'doneTodosCount'
    ])
  }
};

在上面的代码中，我们使用 mapGetters 将 doneTodos 和 doneTodosCount 映射到了组件的计算属性中。这样，我们就可以直接在组件中使用 this.doneTodos 和 this.doneTodosCount 来访问 getter 的值。

2.2 重命名 Getter

有时候，我们可能希望在组件中使用不同的名称来访问 getter。这时，我们可以使用对象形式的 mapGetters：

export default {
  computed: {
    ...mapGetters({
      todos: 'doneTodos',
      count: 'doneTodosCount'
    })
  }
};

在上面的代码中，我们将 doneTodos 映射为 todos，将 doneTodosCount 映射为 count。这样，我们就可以在组件中使用 this.todos 和 this.count 来访问 getter 的值。

3. 在 Action 中获取 Getter 的值

除了在组件中获取 getter 的值外，我们还可以在 Vuex 的 action 中获取 getter 的值。action 是 Vuex 中用于处理异步操作的方法，它可以接收一个 context 对象作为参数，context 对象包含了 state、getters、commit 和 dispatch 等属性。

3.1 在 Action 中使用 Getter

在 action 中，我们可以通过 context.getters 来访问 getter 的值。例如：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vuex', done: true },
      { id: 2, text: 'Build an app', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    }
  },
  actions: {
    logDoneTodos(context) {
      const doneTodos = context.getters.doneTodos;
      console.log('Done todos:', doneTodos);
    }
  }
});

在上面的代码中，我们在 logDoneTodos 这个 action 中通过 context.getters.doneTodos 获取了 doneTodos 的值，并将其打印到控制台。

3.2 使用参数化的 Getter

有时候，我们可能需要根据不同的参数来获取不同的 getter 值。这时，我们可以使用参数化的 getter。例如：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vuex', done: true },
      { id: 2, text: 'Build an app', done: false }
    ]
  },
  getters: {
    getTodoById: state => id => {
      return state.todos.find(todo => todo.id === id);
    }
  },
  actions: {
    logTodoById(context, id) {
      const todo = context.getters.getTodoById(id);
      console.log('Todo:', todo);
    }
  }
});

在上面的代码中，我们定义了一个参数化的 getter getTodoById，它接收一个 id 参数，并返回对应的 todo。在 logTodoById 这个 action 中，我们通过 context.getters.getTodoById(id) 获取了指定 id 的 todo，并将其打印到控制台。

4. 在 Module 中获取 Getter 的值

在大型应用中，我们通常会将 Vuex 的 store 分割成多个模块（module），每个模块都有自己的 state、getter、mutation 和 action。在这种情况下，获取 getter 的值会稍微复杂一些。

4.1 在模块中定义 Getter

首先，我们需要在模块中定义 getter。例如：

const todoModule = {
  state: {
    todos: [
      { id: 1, text: 'Learn Vuex', done: true },
      { id: 2, text: 'Build an app', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    }
  }
};

const store = new Vuex.Store({
  modules: {
    todo: todoModule
  }
});

在上面的代码中，我们定义了一个 todo 模块，并在其中定义了一个 doneTodos 的 getter。

4.2 在组件中获取模块的 Getter

在组件中获取模块的 getter 时，我们需要在 getter 名称前加上模块的名称。例如：

export default {
  computed: {
    doneTodos() {
      return this.$store.getters['todo/doneTodos'];
    }
  }
};

在上面的代码中，我们通过 this.$store.getters['todo/doneTodos'] 获取了 todo 模块中的 doneTodos 的 getter。

4.3 使用 mapGetters 获取模块的 Getter

同样地，我们也可以使用 mapGetters 来获取模块的 getter。例如：

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters({
      doneTodos: 'todo/doneTodos'
    })
  }
};

在上面的代码中，我们使用 mapGetters 将 todo/doneTodos 映射到了组件的计算属性中。

5. 总结

在 Vuex 中，getter 是一个非常有用的工具，它允许我们从 store 中派生出一些状态，并在组件或 action 中使用这些状态。通过 this.$store.getters 或 mapGetters 辅助函数，我们可以轻松地获取 getter 的值。在模块化的 Vuex 应用中，获取 getter 的值需要加上模块的名称。掌握这些技巧，可以帮助我们更好地管理和使用 Vuex 中的状态。