element-ui框架的缓存机制

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

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

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

分析问题：

找到后台管理系统中的标题tag页，然后点击的时候进行数据的加载。

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

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

此处的include如果不写，则默认所有页面都进行缓存，只有通过activated方法才能触发页面的接口。created和mounted只能触发页面一次。

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一致的情况下，则会自动进行缓存，加载数据的时候也是会直接从缓存中加载。

也就是下面的这两个地方：

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

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

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