假设浏览器的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状态中获取到的数据呈现在页面需要的地方
Logo

前往低代码交流专区

更多推荐