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

场景：

我实际用到的是这样的，我父组件引用子组件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="{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]">
     </div>
     <div class='titlebox1'>
      <p class="listtitle">{{item.title}}</p>
      <div 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>
      </div>
    </div>
   </div>
  </div>
</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>

效果如图：

总结

以上所述是小编给大家介绍的父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法，希望对大家有所帮助