父组件中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>
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"></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>

效果如图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏余林丰

Struts2中的JSON问题——后台返回JSON字符串到前台

  最近做一个项目遇到一个比较棘手的问题,项目后台采用struts2+Hibernate3+Spring3,前台采用ExtJs4。笔者目前仍是一名大二学生吗,后...

1936
来自专栏醒者呆

【精解】EOS TPS 多维实测

由于我们在研究eos阶段,大量使用到cleos,因此使用cleos来测试tps是我们第一个能想到的手段。这一节我们将加深理解tps的意义,tps的计算方法,讨论...

1814
来自专栏游戏开发那些事

【Unity3d游戏开发】UGUI插件入门之游戏菜单

  ugui是unity4.6开始加入的一个新的ui系统,非常强大,下面我们将通过一系列博客的方式一起来学习一下ugui的使用。本篇博客会介绍如何使用ugui制...

1072
来自专栏更流畅、简洁的软件开发方式

【自然框架】QuickPager asp.net 分页控件的Ajax分页方式。

  上次比较匆忙,Ajax的分页方式仅实现了基本功能,或者说只是验证了我的想法。现在对Ajax分页有做了一些调整,现在可以正式用了。   使用方法还是非常简单,...

2297
来自专栏FreeBuf

代码安全审计:当file_exists遇上eval

起因 昨晚有人在一QQ群上问lcms(一款网站CMS系统)的一个漏洞是怎么形成的,说了半天。他截图不完整,于是叫他传代码,下载回来找到router.php代码片...

1659
来自专栏何俊林

Android开发中,有哪些让你觉得相见恨晚的方法、类或接口?

前言:Android开发中,不是每一个api,我们都知道,一般情况,面对一个陌生的类,首先new出这个class,得到一到临时变量,然后class.xxx,看对...

1668
来自专栏青枫的专栏

day51_BOS项目_03

将上面的js文件引入所需要的jsp页面中,本例以index.jsp为例 /bos19/WebContent/WEB-INF/pages/common/inde...

501
来自专栏QQ会员技术团队的专栏

gulp源码解析(二)—— vinyl-fs

关于作者: 蓝邦珏,腾讯前端工程师,15年加入腾讯SNG增值产品部,期间主要负责过手Q阅读、手Q动漫项目的业务开发。业余喜欢折腾前端新技术和写文章。 上期文章...

1867
来自专栏向治洪

微信支付实例

1,导入微信的libs包libammsdk.jar; 2,测试时使用weixinDemo中的debug_keystore; 3,需要注意应用要通过审核,并且几个...

3915
来自专栏我有一个梦想

UE4新手之编程指南

  虚幻引擎4为程序员提供了两套工具集,可共同使用来加速开发的工作流程。 新的游戏类、Slate和Canvas用户接口元素以及编辑器功能可以使用C++语言来编写...

2528

扫码关注云+社区