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

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

主要介绍了父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法,需要的朋友可以参考下

场景：场景：

我实际用到的是这样的，我父组件引用子组件related,父组件调用获取页面详情的方法，更新了state值related，子组件根据该related来渲染相关新闻内

容，但是页面打开的时候总是先加载子组件，子组件在渲染的时候还没有获取到更新之后的related值，即使在子组件中watch该值的变化依然不能渲染

出来子组件的相关新闻内容。

我的解决办法：我的解决办法：

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

</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>

<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>

components:{

Related,

},

data(){

return {

id:this.$route.params.id,

topicType:"news",

contentStatus:false,

curHeight:0,

bodyHeight:5000,

moment.locale('zh-cn');

},

mounted(){

setTimeout(()=>{

this.contentToggle();

},500)

},

watch: {

'$route'(to,from){

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

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,