Vue中的组件如何获取Vuex中的状态数据并呈现在页面上

假设浏览器的vue扩展程序显示的vuex中的state状态数据是像下面这样的：

address: object
	address: '学正街18号'
	city: '浙江省杭州市'
	latitude: ''
	longitude: ''
	name: '钱塘区浙江工商大学计算机与信息工程学院'

那么，在vue组件中获取该状态数据并显示在页面上的步骤如下：

• 在<script>内容中填入如下内容：

import {mapState} from 'vuex' //1. 引入mapState

mounted() { // 组件一挂载就向后台异步获取地址数据，并存入到state状态中
	this.$store.dispatch('getAddress')
} 

computed: { //此时在state状态中已经存有地址信息，故可以进行获取
	...mapState(['address'])
} 

• 在需要的地方（此处是DOM元素上）使用它：

<HeaderTop :title="address.name"> // 将在state状态中获取到的数据呈现在页面需要的地方