这次给大家带来如何处理父组件中vuex方法更新state子组件不能及时更新渲染，处理父组件中vuex方法更新state子组件不能及时更新渲染的注意事项有哪些，下面就是实战案例，一起来看一下。
场景：
我实际用到的是这样的，我父组件引用子组件related,父组件调用获取页面详情的方法，更新了state值related，子组件根据该related来渲染相关新闻内容，但是页面打开的时候总是先加载子组件，子组件在渲染的时候还没有获取到更新之后的related值，即使在子组件中watch该值的变化依然不能渲染出来子组件的相关新闻内容。
我的解决办法：
父组件像子组件传值，当父组件执行了获取页面详情的方法之后，state值related更新，然后传给子组件，子组件再进行渲染，可以正常获取到。
父组件代码：
<template>
<p id="newsdetails">
<mt-header title="详情">
<router-link to="/" slot="left">
<mt-button icon="back"></mt-button>
</router-link>
</mt-header>
<p class="details clearfloat">
<h1 class="titlefont">
{{ title }}
</h1>
<p 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>
</p>
<p class="bodyfont clearfloat" id="bodyfont" ref="bodyfont" :class="{bodyheight:contentstatus}">
<p v-html="content"></p>
<p class="editor" v-if="editorname">责任编辑：{{editorname}}</p>
</p>
<p class="contenttoggle" @click="contentstatus=!contentstatus" v-if="contentstatus">阅读全文</p>
<related :related="related"></related>
<!--重点是这里 父组件向子组件传值-->
</p> </p> </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>
<p v-if="lists.length>0>
<p class="tagtitle"><span>相关新闻</span></p>
<p class="listitem" v-if="(item.type=='little')" v-for="(item,index) in lists" :to="{name:'details',params:{id:item.id}}" :key="index" @click="browserdetection()">
<p class="listimg1">
<!--<img :src="{lazy==loaded?item.thumb[0]:lazy==loading?'../../assets/images/little_loading.png':lazy==error?'../../assets/images/little_loading.png'}" alt="" v-lazy="item.thumb[0]">-->
<img :src="item.thumb[0]" alt="" v-lazy="item.thumb[0]">
</p>
<p class='titlebox1'>
<p class="listtitle">{{item.title}}</p>
<p class="titleinfo">
<span class="openapp">打开唐人家</span>
<span v-if="item.top==true" class="totop">置顶</span>
<!--<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dianzan" rel="external nofollow" ></use>
</svg>-->
<span class="like">阅读 {{item.read}}</span>
<span class="time">{{item.createat|formattime}}</span>
</p>
</p>
</p>
</p>
</template>
<script>
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
}
}
}
</script>
效果如图：
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
如何使用vue中filter
怎样使用vue判断dom的class
以上就是如何处理父组件中vuex方法更新state子组件不能及时更新渲染的详细内容。