从Vuex中获取的数据更新界面没有反应

问题

引用Vuex中的数据之后，在修改数据后，引用的数据没有实时更新，需要切换到其他页面，在切换回来数据才会更新，重新渲染页面。

···
 data(){
	return{   
		callModel:this.$store.state.user.callModel
    }
},
···

原因

因为在获取Vuex数据时，是在页面加载前进行获取，而Vuex的数据修改是在加载完毕之后，页面还是初始的数据，并不会进行更新

解决方法

先引入vuex的mapState方法，然后中computed添加你需要的vuex中的状态，注意不需要再data中定义改状态，直接引用即可！

引入一个vuex文件中的状态

<template>
	<div>{{callModel}}</div>
	<div>{{active}}</div>
</template>

<script>
import { mapState } from 'vuex' 
export default {
	computed: {
	    ...mapState('d2admin/user', ['callModel', 'active'])
	}
	data() {
		return {}
	}
}
</script>

引入多个vuex文件中的状态

<template>
	<div>{{asideCollapse}}</div>
	<div>{{asideTransition}}</div>
	<div>{{keepAlive}}</div>
	<div>{{grayActive}}</div>
	<div>{{transitionActive}}</div>
	<div>{{callModel}}</div>
</template>
<script>
import { mapState } from 'vuex' 
export default {
	...
	computed: {
	    ...mapState('d2admin', {
	      asideCollapse: (state) => state.menu.asideCollapse,
	      asideTransition: (state) => state.menu.asideTransition,
	      keepAlive: (state) => state.user.keepAlive,
	      grayActive: (state) => state.user.active,
	      transitionActive: (state) => state.user.active,
	      callModel: (state) => state.user.callModel
	    }),
	}
	data() {
		return {}
	}
	...
}
</script>