父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决

import { Toast } from 'mint-ui';
import {mapState} from 'vuex'
import Related from './Related.vue'
import moment from 'moment';
export default{
name:"NewsDetails",components:{
Related,},data(){
return {
id:this.$route.params.id,topicType:"news",contentStatus:false,curHeight:0,bodyHeight:5000,hotCommentScrollTop:0
}
},created(){
this.id=this.$route.params.id;
this.fetchData();
moment.locale('zh-cn');
},mounted(){
setTimeout(()=>{
this.contentToggle();
},500)
},watch: {
'$route'(to,from){
this.id=this.$route.params.id;
this.fetchData();
}
},computed: {
...mapState({
title: state => state.newsDetails.title,authorName: state => state.newsDetails.authorName,pubNews: state => state.newsDetails.pubNews,pubName: state => state.newsDetails.pubName,editorName: state => state.newsDetails.editorName,createAt: state => state.newsDetails.createAt,content: state => state.newsDetails.content,myFavourite: state => state.newsDetails.myFavourite,related: state => state.newsDetails.related,})
},filters:{
formatTime(time){
return moment(time).fromNow();
},methods:{
fetchData(){
this.$store.dispatch('getDetails',this.id);
},follow(){
Toast('登录后进行关注');
this.$router.push("/login");
},contentToggle(){
this.curHeight=this.$refs.bodyFont.offsetHeight;
if(parseFloat(this.curHeight)>parseFloat(this.bodyHeight)){
this.contentStatus=true;
}else{
this.contentStatus=false;
}
// this.hotCommentScrollTop=this.$refs.hotComment.height;
console.log(this.hotCommentScrollTop);
},}
}