Vue中的组件如何获取Vuex中的状态数据并呈现在页面上
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状态中获取到的数据呈现在页面需要的地方
更多推荐
已为社区贡献1条内容
所有评论(0)