父组件中vuex方法更新state,子组件不能及时更新并渲染的解决方法
2023-09-14 09:07:44 时间
场景:
我实际用到的是这样的,我父组件引用子组件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"></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>
效果如图:
相关文章
- QT-Qt组件QTimer使用方法
- vue - 子组件向父组件 传递方法和参数
- 阿里云服务器 Windows连接不成功 提示“你的凭证不工作” 解决方法
- 日志组件logback介绍及配置使用方法
- vue.js3:父组件子组件互相访问数据方法(vue@3.2.37)
- 【STM32F407】第6章 RTX5调试组件使用方法(重要)
- 【STM32F407】第6章 RL-USB调试组件使用方法(重要)
- Atitit 数据库 负载均衡 方法总结 目录 1. 对称模型负载均衡 vs 非对称模型2 1.1. 业务分离法2 1.2. App + db分布式分离法2 2. 负载均衡算法2 2.1.
- Atitit 非结构化数据管理法 目录 1. 什么是非结构化数据?1 2. 对非结构化数据也即对全文数据的搜索主要有两种方法:2 2.1. 顺序扫描法(Serial Scanning):2 2
- DL之DNN优化技术:利用Dropout(简介、使用、应用)优化方法提高DNN模型的性能
- 内核不中断前提下,Gaussdb(DWS)内存报错排查方法
- 费曼学习法:高效能的学习既是有趣的,同时它的方法也是有迹可循的。
- 【Android 进程保活】应用进程拉活 ( 系统 Service 机制拉活 | Service 组件 onStartCommand 方法分析 | 源码资源 )
- 对Object类中方法的深入理解
- java 连接数据库mysql的方法
- 在使用add()方法添加组件到容器时,必须指定将其放置在哪个区域中
- Android 开发常用方法及命令
- 完美汇总在Ubuntu下gdb调试的方法和编译技巧(包括gcc和g++编译环境)