七十二、Vuex实现双父组件数据共享、localStorage、mapActions和keep-alive

2020/10/31、 周六、今天又是奋斗的一天。

@Author:Runsen

写在前面:我是「Runsen」,热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。大四弃算法转前端,需要每天的日积月累, 每天都要加油!!!

今天继续深入Vuex实现双父组件数据共享。

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。


官方文档:https://vuex.vuejs.org/zh/

Vuex实现双父组件数据共享

在很多项目中,存在仓库数据,单向传递到父组件。双父组件进行数据通信,那么就要引用Vuex。

安装Vuex:npm install Vuex --save


在main.js入口文件中使用store。

在任何组件都可以引用Vuex中的store数据:this.$store.state.city

点击热门城市改变当前城市

将所有需要点击事件,返回首页

Vuex高级使用localStorage (缓存)

Vuex高级使用localStorage ,下一次刷新的时候可以不用加载数据。

LocalStorage,它是真正的缓存机制,也就是我们通常说的磁盘缓存,他可以做到在这些场景下数据丢失:

mapActions

mapActions的使用:在使用组件的时候每次都要{{this.$store.state.city}}

这时候就可以使用辅助函数将他映射为this.methods();

如:导入mapstate,在conputed中直接传入数组...mapState(['city']), 指的是Vuex中的state中的city。

keep-alive优化网页性能

当我每一次切换城市选择页和首页都发起了Ajax。因此需要使用keep-alive优化网页性能。

有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。官网释义:

<keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和<transition>相似,<keep-alive>是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。


但是当切换不同的城市的时候,是不需要缓存的。需要在home.vue使用钩子函数activated

当组件再次重新渲染的的,钩子函数activated就判断最后的城市和缓存中的城市是不是相同,再次发起AJax请求。

参考课程:慕课网Vue2.5->2.6->3.0 开发去哪儿网App 从零基础入门到实战项目开发

刘润森! CSDN认证博客专家 Python Java 前端
17年就读于东莞XX学院化学工程与工艺专业,GitChat作者。Runsen的微信公众号是"Python之王",因为Python入了IT的坑,从此不能自拔。公众号内容涉及Python,Java计算机、杂谈。干货与情怀同在。关注后回复「小白」即可免费获取原创的Python学习资料;喜欢的微信搜索:「Python之王」。个人微信号:RunsenLiu
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:上身试试 返回首页
实付 19.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值