mapState和mapGetters用于将Vuex的state和getters映射为组件计算属性，支持数组写法（同名映射）和对象写法（重命名/计算逻辑），命名空间模块需指定模块路径，须用展开运算符混入computed。
在 Vue 2 中使用 Vuex 进行状态管理时，mapState 和 mapGetters 是两个非常实用的辅助函数，它们能帮你把 store 中的状态和 getter 映射为组件的计算属性，避免重复写冗长的 this.$store.state.xxx 或 this.$store.getters.xxx。
用 mapState 快速映射 state 字段
mapState 通常写在组件的 computed 选项中，支持对象写法和数组写法两种形式：
-
数组写法（适合字段名与 state 名一致）：
直接传入字符串数组，每个字符串对应 state 中的一个顶层属性名。
computed: {
...mapState(['count', 'userInfo'])
}
等价于：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
computed: {
count() { return this.$store.state.count },
userInfo() { return this.$store.state.userInfo }
}
-
对象写法（支持重命名和计算逻辑）：
用对象键值对方式，值可以是字符串（映射）、函数（带参数的计算）、或箭头函数（简洁写法）。
computed: {
...mapState({
localCount: 'count',
fullName: state => `${state.userInfo.firstName} ${state.userInfo.lastName}`,
hasLogin: state => !!state.userInfo.id
})
}
用 mapGetters 映射 getters 提升复用性
mapGetters 的用法和 mapState 类似，但它是用来映射 store 中定义的 getters。注意：getter 必须已在 Vuex store 的 getters 选项中定义好。
立即学习“前端免费学习笔记（深入）”；
-
数组写法（直接映射同名 getter）：
适用于 getter 名和组件内想用的计算属性名一致的情况。
computed: {
...mapGetters(['doneTodos', 'activeCount'])
}
-
对象写法（支持别名和传参）：
键是组件内使用的属性名，值是 getter 名；若需传参，必须用函数形式调用 getter（不能直接传参给 mapGetters）。
computed: {
...mapGetters({
completed: 'doneTodos',
pending: 'activeCount'
}),
// 如需传参，仍需在函数中调用：
isTodoDone() {
return this.$store.getters.isTodoCompleted(123)
}
}
配合命名空间模块使用（带 namespaced: true）
当 Vuex 使用了模块且启用了 namespaced: true，mapState 和 mapGetters 就需要指定模块路径：
-
mapState支持第一个参数传入模块名字符串：
computed: {
...mapState('user', ['profile', 'permissions'])
}
-
mapGetters同样支持：
computed: {
...mapGetters('cart', ['totalPrice', 'itemCount'])
}
- 也可以用对象写法显式声明模块路径：
computed: {
...mapGetters({
cartTotal: 'cart/totalPrice',
userRole: 'user/role'
})
}
注意事项和常见坑点
- 必须通过
...mapState展开运算符混入computed，否则不会生效； -
mapGetters映射的是只读的计算属性，不能直接赋值； - 不要在
mapState或mapGetters中访问未定义的 state 或 getter，会报错； - 如果组件同时有其他计算属性，记得用对象展开语法合并，不要覆盖；
- 在 TypeScript 项目中，推荐搭配
mapState的泛型写法或使用createNamespacedHelpers提升类型提示。
