vue页面缓存

一.页面缓存介绍

页面缓存对于用户来说，是一个比较常用的需求；

1.项目打开在tab的页面有时需要缓存，例如，用户打开了一个页面，停留在该页面的某一步骤或操作，用户没有关闭此页面的情况下，又打开了另一个页面查看数据，然后用户想切换到刚才那个打开的页面继续操作，此时，那个页面不应该刷新，而是缓存下来，只有当用户关闭了页面，重新打开时，页面才会刷新；

2.项目打开在tab的页面有时候不需要缓存，例如，用户打开一个页面，看完数据之后，没有关闭此页面的情况下，又打开了一个页面操作数据，操作完之后，又切回到前一个页面来查看最新的数据，此时则要重新刷新页面，不能缓存页面；

可以参考github项目：https://github.com/Little-Orange7/cmms-vue

该项目设计就结合了上述两种情况，就页面打开时是否缓存，可以由用户定制化，由用户自由设置。

二.具体实现

1.使用keep-alive来实现：

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

include中包含的页面的name则会被缓存下来，注意：此name是指的是页面属性的name,而不是路由对象中的name属性，所以页面的name属性一定要写，并且名称要和菜单页面的一致，因为设计时读取的name是存放在数据库中的，根据菜单url的组件名称来截取的。

2.使用vuex

使用vuex来缓存对应的include组件名称，根据此缓存来动态调整缓存页面；

[SET_KEEPALIVE] (state, compNames) {
  state.keepAliveComps = compNames
}

3.监听

在tab中监听打开的tab对象，打开和关闭时，根据是否需要缓存的标志，来动态的调整缓存的状态数据：

watch: {
  // 监听打开的tabs，来动态跳转缓存页面
  tabsList (newVal, oldVal) {
    let vals = newVal
    this.mediList = []// 每次都要重置为空
    vals.forEach(val => {
      if (val.keepAlive) { // 打开的tab且设置为缓存页的才会缓存
        this.mediList.push(val.name)// 放入打开的tab的name
      }
    })
    this.$store.commit('SET_KEEPALIVE', this.mediList)
  }
}

以上就是keepAlive缓存知识，有疑问的可以下方留言哦！