這次帶給大家如何處理父元件中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>效果如圖：
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是如何處理父元件中vuex方法更新state子元件不能及時更新渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章！
