mapState 是 Vuex 提供的一个辅助函数，其主要作用是将 Vuex 仓库中的状态映射到组件的计算属性中，这样在组件里就能像访问本地计算属性一样访问 Vuex 仓库中的状态。以下为你详细介绍 mapState 函数的不同用法。
1. 基本用法：对象形式
当使用对象形式时，你可以自定义组件计算属性的名称，并指定从 Vuex 仓库中获取状态的方式。
示例代码
vue
<template>
<div>
<!-- 访问映射后的计算属性 -->
<p>用户姓名: {{ userName }}</p>
<p>用户年龄: {{ userAge }}</p>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState({
// 自定义计算属性名称，从根状态获取 user.name
userName: state => state.user.name,
// 自定义计算属性名称，从根状态获取 user.age
userAge: state => state.user.age
})
}
};
</script>
代码解释
mapState函数接收一个对象作为参数，对象的键是组件计算属性的名称，值是一个箭头函数，用于从 Vuex 仓库的状态对象state中获取所需的状态。- 使用扩展运算符
...将mapState返回的对象展开，合并到组件的computed选项中。
2. 数组形式
若组件计算属性的名称与 Vuex 仓库中的状态名称一致，可使用数组形式简化代码。
示例代码
vue
<template>
<div>
<!-- 访问映射后的计算属性 -->
<p>用户姓名: {{ name }}</p>
<p>用户年龄: {{ age }}</p>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState([
// 映射根状态中的 name 到组件的计算属性 name
'name',
// 映射根状态中的 age 到组件的计算属性 age
'age'
])
}
};
</script>
代码解释
mapState函数接收一个数组作为参数，数组中的元素是 Vuex 仓库中状态的名称。- 组件中计算属性的名称会与数组中的元素名称保持一致。
3. 混合使用对象和本地计算属性
在组件的 computed 选项中，你可以将 mapState 与本地计算属性混合使用。
示例代码
vue
<template>
<div>
<!-- 访问映射后的计算属性 -->
<p>用户姓名: {{ name }}</p>
<!-- 访问本地计算属性 -->
<p>用户姓名大写: {{ upperCaseName }}</p>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState([
'name'
]),
// 本地计算属性
upperCaseName() {
return this.name.toUpperCase();
}
}
};
</script>
代码解释
- 先使用
mapState将 Vuex 仓库中的name状态映射到组件的计算属性name上。 - 再定义一个本地计算属性
upperCaseName，它依赖于name计算属性。
4. 模块中的状态映射
若 Vuex 仓库使用了模块，可通过对象形式指定从特定模块中获取状态。
示例代码
vue
<template>
<div>
<!-- 访问映射后的计算属性 -->
<p>用户角色: {{ userRole }}</p>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState({
// 从 userModule 模块中获取 role 状态
userRole: state => state.userModule.role
})
}
};
</script>
代码解释
- 通过箭头函数
state => state.userModule.role从userModule模块中获取role状态，并将其映射到组件的计算属性userRole上。
通过以上几种用法，你可以灵活地使用 mapState 函数将 Vuex 仓库中的状态映射到组件的计算属性中。