[TOC]
### 定义state
{ app_root } / store / module / city.js
>[danger] 注意！！！ 是带命名空间的哦
```
const state = {
list: ['北京', '天津', '南京']
}
const getters = {
getAllList: state => state.list
}
const mutations = {}
const actions = {}
export default {
namespaced:true,
state,
getters,
mutations,
actions
}
```
* [ ] 第一种组件中调用：
>[danger] 注意！！！ 是带命名空间的哦
```
<template>
<div class="container">
<div>
<label for="">姓名</label>
<p>{{list}}</p>
</div>
</div>
</template>
<script>
import axios from 'axios'
import { mapState } from 'vuex'
export default {
data() {
return {
}
},
computed: {
...mapState({
list: state => state.city.list
})
}
}
</script>
<style>
.container {
width: 600px;
margin: 60px auto;
}
</style>
```
*****
* [ ] 第二种组件中调用
>[danger] 注意！！！ 是带命名空间的哦
```
<template>
<div class="container">
<div>
<label for="">姓名</label>
<p>{{list}}</p>
</div>
</div>
</template>
<script>
import axios from 'axios'
import { createNamespacedHelpers } from 'vuex'
// createNamespacedHelpers（' 模块名称 '）
const { mapState } = createNamespacedHelpers('city')
export default {
data() {
return {
}
},
computed: {
...mapState({
list: state => state.list
})
}
}
</script>
<style>
.container {
width: 600px;
margin: 60px auto;
}
</style>
```
