场景：

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

我的解决办法：

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

父组件代码：

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

import {mapActions, mapState, mapGetters} from 'vuex'

import moment from 'moment'

export default{

data(){

return {

lists: [],

id:this.$route.params.id,

}

},

props:{

related:Array //重点是这里

},

created(){

moment.locale('zh-cn');

},

/*computed: {

...mapState({

related: state => state.newsDetails.related,

})

},*/

filters:{

formatTime(time){

return moment(time).fromNow();

},

},

methods:{

},

watch: {

related (val) {

this.lists = val;

},

'$route'(to,from){

this.id=this.$route.params.id

}

}

}

效果如图：

总结

以上所述是小编给大家介绍的父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！