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