这篇文章主要介绍了父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法,需要的朋友可以参考下
场景：
我实际用到的是这样的，我父组件引用子组件related,父组件调用获取页面详情的方法，更新了state值related，子组件根据该related来渲染相关新闻内容，但是页面打开的时候总是先加载子组件，子组件在渲染的时候还没有获取到更新之后的related值，即使在子组件中watch该值的变化依然不能渲染出来子组件的相关新闻内容。
我的解决办法：
父组件像子组件传值，当父组件执行了获取页面详情的方法之后，state值related更新，然后传给子组件，子组件再进行渲染，可以正常获取到。
立即学习“前端免费学习笔记（深入）”；
父组件代码：
{{ title }}
- {{pubName}}
- {{authorName}} {{createAt|formatTime}}
责任编辑：{{editorName}}
阅读全文
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
0">
相关新闻
<!--
{{item.title}}
打开唐人家 置顶 <!-- --> 阅读 {{item.read}} {{item.createAt|formatTime}}
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 } } }
登录后复制
效果如图：
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
vue如何实现前进刷新后退不刷新的效果
关于Vue评论框架的实现(父组件的实现)
以上就是如何解决父组件中vuex方法更新state子组件不能及时更新并渲染的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2748039.html
