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

场景：

我实际用到的是这样的，我父组件引用子组件related,父组件调用获取页面详情的方法，更新了state值related，子组件根据该related来渲染相关新闻内容，但是页面打开的时候总是先加载子组件，子组件在渲染的时候还没有获取到更新之后的related值，即使在子组件中watch该值的变化依然不能渲染出来子组件的相关新闻内容。

我的解决办法：

父组件像子组件传值，当父组件执行了获取页面详情的方法之后，state值related更新，然后传给子组件，子组件再进行渲染，可以正常获取到。

父组件代码：

rush:js;">

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);
},}
}

子组件related.vue

rush:js;">

效果如图：

总结

以上所述是小编给大家介绍的父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。