面试题：如何在组件中批量使用 Vuex 的 getter 属性？

在 Vue 组件中使用 Vuex 的 getter 属性时，如果需要在组件中批量使用多个 getter，可以通过以下几种方式实现：

1. 使用 `mapGetters` 辅助函数

mapGetters 是 Vuex 提供的一个辅助函数，用于将 Vuex 中的 getter 映射到组件的计算属性中。

使用方法

在组件中引入 mapGetters。
使用 mapGetters 将 getter 映射为组件的计算属性。

示例：

import { mapGetters } from 'vuex';

export default {
  computed: {
    // 使用 mapGetters 批量映射 getter
    ...mapGetters([
      'totalCount', // 将 this.totalCount 映射为 this.$store.getters.totalCount
      'completedCount',
      'activeCount',
    ]),
  },
};

说明：

mapGetters 接收一个数组或对象作为参数。
数组中的每个字符串是 Vuex 中 getter 的名称。
映射后，可以直接在组件中通过 this.getterName 访问 getter。

重命名 `getter`

如果需要重命名 getter，可以使用对象形式的 mapGetters。

示例：

import { mapGetters } from 'vuex';

export default {
  computed: {
    // 使用对象形式重命名 getter
    ...mapGetters({
      count: 'totalCount', // 将 this.count 映射为 this.$store.getters.totalCount
      completed: 'completedCount',
      active: 'activeCount',
    }),
  },
};

说明：

对象的键是组件中使用的名称，值是 Vuex 中 getter 的名称。

2. 直接使用 `this.$store.getters`

如果不使用 mapGetters，可以直接通过 this.$store.getters 访问 getter。

示例：

export default {
  computed: {
    totalCount() {
      return this.$store.getters.totalCount;
    },
    completedCount() {
      return this.$store.getters.completedCount;
    },
    activeCount() {
      return this.$store.getters.activeCount;
    },
  },
};

说明：

这种方式需要手动为每个 getter 编写计算属性。
适合只需要使用少量 getter 的场景。

3. 结合 `mapState` 和 `mapGetters`

如果组件中同时需要访问 Vuex 的 state 和 getter，可以结合使用 mapState 和 mapGetters。

示例：

import { mapState, mapGetters } from 'vuex';

export default {
  computed: {
    // 映射 state
    ...mapState({
      todos: state => state.todos,
    }),
    // 映射 getter
    ...mapGetters([
      'totalCount',
      'completedCount',
      'activeCount',
    ]),
  },
};

说明：

mapState 用于映射 state，mapGetters 用于映射 getter。
可以在组件中同时访问 state 和 getter。

4. 在组合式 API 中使用 `useStore`

如果使用 Vue 3 的组合式 API，可以通过 useStore 访问 Vuex 的 getter。

示例：

import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    const totalCount = computed(() => store.getters.totalCount);
    const completedCount = computed(() => store.getters.completedCount);
    const activeCount = computed(() => store.getters.activeCount);

    return {
      totalCount,
      completedCount,
      activeCount,
    };
  },
};

说明：

使用 useStore 获取 Vuex 的 store 实例。
使用 computed 将 getter 映射为响应式属性。

5. 在组合式 API 中使用 `mapGetters`

在组合式 API 中，可以通过自定义函数实现类似 mapGetters 的功能。

示例：

import { computed } from 'vue';
import { useStore } from 'vuex';

function useGetters(mapper) {
  const store = useStore();
  return Object.keys(mapper).reduce((result, key) => {
    result[key] = computed(() => store.getters[mapper[key]]);
    return result;
  }, {});
}

export default {
  setup() {
    const { totalCount, completedCount, activeCount } = useGetters({
      totalCount: 'totalCount',
      completedCount: 'completedCount',
      activeCount: 'activeCount',
    });

    return {
      totalCount,
      completedCount,
      activeCount,
    };
  },
};

说明：