[TOC]
### 全局 State
* [ ] 聲明一個 appName 變量 保存在 state 中，并在組件中調用
store / state.js
```
const state = {
// state 用于存放數據
appName: 'admin'
}
export default state
```
*****
組件調用：
>[danger] State 存放的數據，需要用 mapState 混入 組件的 computed 計算屬性中
```
<template>
<div>
<h1>
管理員：{{appName}}
</h1>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState({
appName: state => state.appName
})
}
}
</script>
<style lang="scss" scoped>
</style>
```
*****
### 模塊中的 State
module / user.js
```
const state = {
userName: '張三'
}
const actions = {}
const mutations = {}
export default {
namespaced: true,
state,
actions,
mutations
}
```
*****
組件中調用：
>[danger] 注意！！！ 模塊中加了命名空間，調用時，需要加上模塊名稱
```
<template>
<div>
<h1>
管理員：{{appName}}
</h1>
<h2>
當前登錄用戶：{{userName}}
</h2>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState({
appName: state => state.appName,
// 調用 user 模塊下的 state 數據
userName: state => state.user.userName
})
}
}
</script>
<style lang="scss" scoped>
</style>
```
