상위 구성 요소의 vuex 메서드가 상태를 업데이트하고 하위 구성 요소를 제때에 업데이트하고 렌더링할 수 없는 문제를 해결하는 방법-JS 튜토리얼-php.cn

상위 구성 요소의 vuex 메서드가 상태를 업데이트하고 하위 구성 요소를 제때에 업데이트하고 렌더링할 수 없는 문제를 해결하는 방법

不言

풀어 주다： 2018-06-29 16:11:37

원래의

1939명이 탐색했습니다.

이 글에서는 적시에 업데이트 및 렌더링할 수 없는 상태 하위 구성 요소를 업데이트하기 위해 상위 구성 요소의 vuex 메서드에 대한 완벽한 솔루션을 주로 소개합니다. 필요한 친구는 이를 참조할 수 있습니다.

시나리오:

실제로 사용하는 것은 내 상위 구성 요소가 관련 하위 구성 요소를 참조하고, 하위 구성 요소가 관련 상태 값을 업데이트하는 메서드를 호출하는 경우입니다. 페이지가 열리면 항상 자식 컴포넌트가 먼저 로드되고, 렌더링 중에 업데이트된 관련 값을 얻지 못합니다. 하위 구성요소를 렌더링할 수 없습니다.

내 솔루션:

상위 구성 요소가 값을 하위 구성 요소에 전달합니다. 상위 구성 요소가 페이지 세부 정보를 가져오는 메서드를 실행하면 관련 상태 값이 업데이트된 후 하위 구성 요소에 전달됩니다. , 하위 구성 요소 render 는 정상적으로 얻을 수 있습니다.

상위 구성 요소 코드:

<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=&#39;btnFollow&#39; @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 &#39;mint-ui&#39;;
 import {mapState} from &#39;vuex&#39;
 import Related from &#39;./Related.vue&#39;
 import moment from &#39;moment&#39;;
 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(&#39;zh-cn&#39;);
  },
  mounted(){
   setTimeout(()=>{
    this.contentToggle();
   },500)
  },
  watch: {
   &#39;$route&#39;(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(&#39;getDetails&#39;,this.id);
   },
   follow(){
    Toast(&#39;登录后进行关注&#39;);
    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);
   },
  }
 }

로그인 후 복사

하위 구성 요소 관련.vue

<template>
  <p v-if="lists.length>0">
    <p class="tagTitle"><span>相关新闻</span></p>
    <p class="listItem" v-if="(item.type==&#39;little&#39;)" v-for="(item,index) in lists" :to="{name:&#39;details&#39;,params:{id:item.id}}" :key="index" @click="browserDetection()">
     <p class="listImg1">
      <!--<img :src="{lazy==loaded?item.thumb[0]:lazy==loading?&#39;../../assets/images/little_loading.png&#39;:lazy==error?&#39;../../assets/images/little_loading.png&#39;}" alt="" v-lazy="item.thumb[0]">-->
      <img :src="item.thumb[0]" alt="" v-lazy="item.thumb[0]">
     </p>
     <p class=&#39;titleBox1&#39;>
      <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 &#39;vuex&#39;
 import moment from &#39;moment&#39;
 export default{
  data(){
   return {
    lists: [],
    id:this.$route.params.id,
   }
  },
  props:{
    related:Array  //重点是这里
  },
  created(){
   moment.locale(&#39;zh-cn&#39;);
  },
  /*computed: {
   ...mapState({
    related: state => state.newsDetails.related,
   })
  },*/
  filters:{
   formatTime(time){
    return moment(time).fromNow();
   },
  },
  methods:{
  },
  watch: {
   related (val) {
    this.lists = val;
   },
   &#39;$route&#39;(to,from){
    this.id=this.$route.params.id
   }
  }
 }
</script>

로그인 후 복사

효과는 그림과 같습니다: