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

@Author：Runsen

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

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

文章目录

Vuex
Vuex实现双父组件数据共享
点击热门城市改变当前城市
将所有需要点击事件，返回首页
Vuex高级使用localStorage （缓存）
mapActions
keep-alive优化网页性能

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 从零基础入门到实战项目开发

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

【Unity3D-UGUI系列】（十二）ScrollView 滚动视图组件详解
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享简书地址我的个人博客 QQ群:1040082875 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有 ...
[生存志] 第58节孔门十哲七十二贤
孔门十哲七十二贤孔子本着"首都市民"精神力图恢复周公"礼乐"游戏,自始至终以"周公继承人" ...
《蜀山云游记》——君山七十二螺
<蜀山云游记>--君山七十二螺李斫岩洞庭月 ...
七十二、Python | Leetcode字符串系列（下篇）
@Author:Runsen @Date:2020/7/3 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰 ...
JavaScript学习（七十二）—严格模式
JavaScript学习(七十二)-严格模式 JavaScript除了提供正常模式外,还提供了严格模式,ES5的严格模式是采用具有限制性JavaScript变体的一种方式,即在严格条件下运行JS代码, ...
[ Coding七十二绝技 ] 如何利用Java异常快速分析源码
[ Coding七十二绝技 ] 如何利用Java异常快速分析源码参考文章: (1)[ Coding七十二绝技 ] 如何利用Java异常快速分析源码 (2)https://www.cnblogs.co ...
信息系统项目管理师必背核心考点（七十二）V模型
科科过为您带来软考信息系统项目管理师核心重点考点(七十二)V模型,内含思维导图+真题 [信息系统项目管理师核心考点]V模型一.软件开发瀑布模型的变种,反映了测试阶段和开发过程期间各阶段的对应关系,左 ...
第七十二章 Caché 函数大全 $WISWIDE 函数
文章目录第七十二章 Caché 函数大全 $WISWIDE 函数大纲参数描述示例第七十二章 Caché 函数大全 $WISWIDE 函数返回一个标志,该标志指示字符串是否包含代理对. 大 ...
【Microsoft Azure 的1024种玩法】七十二.使用NodeJS手动编写调用Azure Cognitive Services Translator API代码获取其支持翻译的语言集
[简介] Azure Cognitive Services Translato 是一种基于云的神经网络机器翻译服务,同时也是 REST API 的 Azure 认知服务系列的一部分. 本篇文章将会主要 ...

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