[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>
```
