前端路上那些坑——keep-alive

vue项目中切换页签如何保留当前正在创建/编辑的表单输入的内容呢？

一、可以使用vuex

结合组件中的导航守卫beforeRouteLeave

在导航守卫中将输入的数据存入vuex中

再切回页面时从vuex中读取数据进行回显

但是这样很麻烦诶～

从vuex中读取数据，按照每个字段回显

然后编辑的时候也需要做回显

就需要严格保证事件的执行顺序：先初始化数据，再将编辑请求回来的数据进行回显赋值，然后vuex中的数据再来一遍

此外，还需要保证数据的响应式，否则debug的时候能找哭

比如，vuex中state存obj的时候在mutation中直接用state.obj={a: 1}

这样在组件中无法监听到这个obj的变化

正确的方法是：

在mutation中使用Vue.set(state.obj, 'a', 1)

二、使用keep-alive

当你尝试使用keep-alive当时候，你就会发现网上有铺天盖地的推荐这样用：

 

 

 亲测不行！！！

这样会出现什么问题呢？先描述一下我的使用过程：

1. 我从创建页切换到列表页不需要缓存创建页数据，于是在beforeRouteLeave中判断将创建页的keepAlive设置为false；

2. 我从创建页切换到非列表页需要缓存创建页的数据，于是在beforeRouteLeave中判断将创建页的keepAlive设置为true；

3. 为了保险起见，我在列表页的beforeRouteLeave中判断它要进入创建页了，我将创建页的keepAlive设置为false

看起来是不是很完美？没什么问题对不对？

奇怪的事情发生了：我一顿如下操作：

当我从创建页（以下称为A）的表单某个input中输入1

切换页签到非列表页（以下称为B）

再切换回A发现1还在，没毛病对不对？

接下来我从A返回列表页（以下称为C）

再切换回A发现1没了，也很正确的样子

然后，问题来了：

现在我在A页把输入的1改成2

再切换到B

再切换回A

发现居然还是1！！！

发现这说明之前的缓存并没有被清掉，具体原因网上有很多解释，就不赘述了

所以此法不通～

摆正姿势，再来：

 

 

 

 

 

 就这样～ok