element-ui 页面缓存与去除缓存 keep-alive

Dear 丶 2021-07-25 16:07 980阅读 0赞

## element-ui框架的缓存机制 ##

在工作中，element-ui一般适用于做后台管理系统，但是我实际用到的不是很多。  
今天工作中，遇到了一个后台管理系统页面缓存的问题。

问题描述：  
当前页面的情况是，当前页面从缓存中拿取数据而不是从后台接口中获取数据，这样处理的好处是页面数据加载快，省去了数据加载的过程，缺点也很明显，如果数据有更新或者改变，页面是不是发生变化的。

需求：  
将此页面从缓存中去除，然后改为正常的从后台接口获取数据。

分析问题：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
找到后台管理系统中的标题tag页，然后点击的时候进行数据的加载。

<keep-alive :include="cachedViews">
       <router-view :key="key" />
     </keep-alive>

keep-alive就是保存缓存的标签

computed: { 
      cachedViews() { 
        return this.$store.state.tagsView.cachedViews;
      }
    }

找到store中的`cachedViews`;

ADD_CACHED_VIEW: (state, view) => { 
        if (state.cachedViews.includes(view.name)) return;
        // if (!view.meta.noCache) { 
        state.cachedViews.push(view.name);
        // }
      }

以上代码的意思就是：如果页面路由中的name跟页面代码中的name一致的情况下，则会自动进行缓存，加载数据的时候也是会直接从缓存中加载。

也就是下面的这两个地方：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]

最简单粗暴的解决办法就是：将两边的name值设置成不一样的值。

具体的原理需要看一下vue的缓存机制，话说好久没有学习新知识了，很惭愧啊。。。。

人不学习是会死翘翘的，被后来者拍死在沙滩上，哈哈，开个玩笑……共勉

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/d52ec84455d142d58ca6c98200ef5a96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/e9f0ee0dcd254778939f1265c84bf08f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/05bfb1a3190e4d4c846cef3164fc7753.png