Vue2---Vant组件库中的List组件的loading数据 与 Vue的组件缓存 keep-alive 存在冲突的解决方法

一.问题描述：

项目基础代码完成后，我测试代码时发现：由于我给List组件的父组件添加了组件缓存，也就导致List组件中的data数据会被缓存，而Vant的List组件中的loading配置项，也会因为缓存而被保存，这也就导致二次进入页面的时候，数据加载不出来，显示一直在加载。

 如下所示：

二.产生原因：

因为此时的loading为true，而loading显示为true的原因也很简单，因为token被更改，拿不到后台的数据，就会一直加载。

三.解决思路：

  解决办法自然就是登陆成功后在List组件中将他的loading修改为false，然而我发现这个办法并不可行，因为List组件已经被缓存，在List组件中没有可以触发事件的函数，只能通过List的父组件的activated来触发进入缓存页面后的函数。于是我尝试通过父传子的通信方式来在父组件的activated函数中给子组件传值，结果Vant的配置项只认自己人，传过去了还不行，还得让List组件本地的值接收，这时候就会出现另外两个严重bug，这里就不描述了。于是最终解决思路便是:利用vuex+computed修改List的loading

四.解决方式：

1.新建一个vuex的modules：

2.在List的父组件中的activated函数中调用方法，将vant模块内的loading数据修改为false

 3.在List组件中接收并部署loading，同时不要忘了添加set函数

 

 4.如此，此问题便已基本解决，效果如下：