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