七十二、vuex实现双父组件数据共享、localstorage、mapactions和keep-凯发ag旗舰厅登录网址下载

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

@author：runsen

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

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

文章目录

• vuex
• vuex实现双父组件数据共享
• 点击热门城市改变当前城市
• 将所有需要点击事件，返回凯发ag旗舰厅登录网址下载首页
• vuex高级使用localstorage （缓存）
• mapactions
• keep-alive优化网页性能

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

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

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

安装vuex：npm install vuex --save

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

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

vuex高级使用localstorage ，下一次刷新的时候可以不用加载数据。

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

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

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

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

当我每一次切换城市选择页和凯发ag旗舰厅登录网址下载首页都发起了ajax。因此需要使用keep-alive优化网页性能。

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

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和相似，是一个抽象组件：它自身不会渲染一个 dom 元素，也不会出现在父组件链中。

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

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

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

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的七十二、vuex实现双父组件数据共享、localstorage、mapactions和keep-alive的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。