如何在Vue3中使用mapGetters辅助函数？

在 Vue3 的组合式 API 中，Vuex 同样没有内置适用于 <script setup> 的 mapGetters 辅助函数，但我们可以参考 mapState 的实现思路，封装一个适用于组合式 API 的 mapGetters 工具函数，实现批量映射 getters 的功能。

实现方法：封装自定义 mapGetters

1. 创建工具函数

在 store/mappers.js 中添加 mapGetters 函数（可与之前的 mapState 放在一起）：

2. 在组件中使用

在 <script setup> 中导入并使用自定义的 mapGetters：

<template>
  <div>
    <p>计数加倍：{{ doubleCount }}</p>
    <p>用户名（格式化）：{{ formattedName }}</p>
    <p>购物车商品总数：{{ cartTotal }}</p>
  </div>
</template>

<script setup>
import { mapGetters } from './store/mappers'

// 映射getters（支持多种形式）
const { doubleCount, formattedName, cartTotal } = mapGetters({
  // 直接映射getters中的doubleCount，变量名与getter名一致
  doubleCount: 'doubleCount',
  // 自定义变量名，映射getters中的userFormattedName
  formattedName: 'userFormattedName',
  // 映射命名空间模块中的getter（假设存在cart模块）
  cartTotal: 'cart/totalItems'
})

// 也支持数组形式（适用于变量名与getter名一致的场景）
// const { doubleCount, userFormattedName } = mapGetters(['doubleCount', 'userFormattedName'])
</script>

关键说明

1. 响应性保证：与 mapState 类似，mapGetters 通过 computed 包装 getters，确保 getters 依赖的 state 变化时，组件能自动更新。
2. 支持两种映射形式：
   • 数组形式：mapGetters(['doubleCount', 'userName']) —— 适用于变量名与 getter 名完全一致的场景。
   • 对象形式：mapGetters({ 别名: getter名 }) —— 支持自定义变量名，更灵活。
3. 命名空间模块处理：对于带命名空间的模块（如 cart 模块），直接在 getter 名前加模块前缀即可（如 cart/totalItems），无需额外修改工具函数。
4. 与 mapState 配合使用：实际开发中可同时导入 mapState 和 mapGetters，按需映射 state 和 getters：

   import { mapState, mapGetters } from './store/mappers'

   const { count } = mapState(['count'])
   const { doubleCount } = mapGetters(['doubleCount'])

总结

通过封装自定义的 mapGetters 工具函数，我们可以在 Vue3 组合式 API 中实现与 Vue2 类似的 getters 批量映射功能。核心逻辑是利用 computed 保持响应性，并通过 useStore 访问 store 中的 getters。

如果项目中映射需求较少，直接使用 computed(() => store.getters.xxx) 手动映射更简洁；若需要批量映射，封装工具函数能提高开发效率。