父組件中vuex方法更新state子組件不能及時更新并渲染的完美解決方法

2019-11-19 13:57:40

字體：大中小

來源：轉載

供稿：網友

場景：

我實際用到的是這樣的，我父組件引用子組件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>

效果如圖：