场景：
我实际用到的是这样的，我父组件引用子组件related,父组件调用获取页面详情的方法，更新了state值related，子组件根据该related来渲染相关新闻内容，但是页面打开的时候总是先加载子组件，子组件在渲染的时候还没有获取到更新之后的related值，即使在子组件中watch该值的变化依然不能渲染出来子组件的相关新闻内容。
我的解决办法：
父组件像子组件传值，当父组件执行了获取页面详情的方法之后，state值related更新，然后传给子组件，子组件再进行渲染，可以正常获取到。
父组件代码：
<template>
<div id="newsDetails">
<mt-header title="详情">
<router-link to="/" slot="left">
<mt-button icon="back"></mt-button>
</router-link>
</mt-header>
<div class="details clearfloat">
<h1 class="titleFont">
{{ title }}
</h1>
<div class="clearfloat sourceWrap">
<ul class="sourceFont">
<li v-if="(pubNews==true)">
<span class="source">{{pubName}}</span>
</li>
<li>
<span class="authorName">{{authorName}}</span>
<span class="time">{{createAt|formatTime}}</span>
</li>
</ul>
<span v-if="(pubNews==true)" class='btnFollow' @click="follow">关注</span>
</div>
<div class="bodyFont clearfloat" id="bodyFont" ref="bodyFont" :class="{bodyHeight:contentStatus}">
<div v-html="content"></div>
<div class="editor" v-if="editorName">责任编辑：{{editorName}}</div>
</div>
<div class="contentToggle" @click="contentStatus=!contentStatus" v-if="contentStatus">阅读全文</div>
<Related :related="related"></Related>
<!--重点是这里 父组件向子组件传值-->
</div> </div> </template>
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
<template>
<div v-if="lists.length>0">
<div class="tagTitle"><span>相关新闻</span></div>
<div class="listItem" v-if="(item.type=='little')" v-for="(item,index) in lists" :to="{name:'details',params:{id:item.id}}" :key="index" @click="browserDetection()">
<div class="listImg1">
<!--<img :src="/UploadFiles/2021-04-02/{lazy==loaded">
效果如图：
总结
以上所述是小编给大家介绍的父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
父组件,vuex,子组件
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。