[TOC]
### Getters 获取 State 中的数据
* [ ] 作用：获取state中的数据
### 全局中使用getters
* [ ] 获取根目录下的 state 中的appName，并把数据转换为大写
store / getters.js
```
const getters = {
appNameToUpper: state => state.appName.toUpperCase()
}
export default getters;
```
模板中使用：
```
<template>
<div>
<h1>
管理员：{{appName}}
</h1>
<h2>
当前登录用户：{{userName}}
</h2>
<h2>
用户名转大写：{{appNameToUpper}}
</h2>
</div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
computed: {
...mapState({
appName: state => state.appName,
// 调用 user 模块下的 state 数据
userName: state => state.user.userName
}),
...mapGetters([
'appNameToUpper'
])
}
}
</script>
<style lang="scss" scoped>
</style>
```
*****
### 模块中使用getters
module / user.js
```
const state = {
userName: 'WANG'
}
const getters = {
userNameToLower: state => state.userName.toLowerCase()
}
const actions = {}
const mutations = {}
export default {
namespaced: true,
state,
actions,
mutations,
getters
}
```
模板中使用：
>[danger] 注意！！！ 模块中加了命名空间，组件中使用需要加上模块名称
```
<template>
<div>
<h1>
管理员：{{appName}}
</h1>
<h2>
当前登录用户：{{userName}}
</h2>
<h2>
用户名转大写：{{userNameToLower}}
</h2>
</div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
computed: {
...mapState({
appName: state => state.appName,
// 调用 user 模块下的 state 数据
userName: state => state.user.userName
}),
...mapGetters('user',[
'userNameToLower'
])
}
}
</script>
<style lang="scss" scoped>
</style>
```
