Vue-keepAlive按需缓存

Vue项目开发中我们经常会有某些场景例如列表进入详情缓存列表页面，列表返回首页清除缓存等需求。那我们如何实现该需求呢。
vue有内置的缓存组件keepAlive，使用keepAlive + include就可以帮我们非常完美的实现该需求。

1.在Vuex中配置需要缓存的数组以及处理方法

export default new Vuex.Store({
  state: {
    keepAlive: [],
  },
  //getters和组件的computed 类似，方便直接生成一些可以直接用的数据。当组装的数据要在多个页面使用时，就可以使用 getters 来做
  getters: {
    keepAlive: state => state.keepAlive
  },
  mutations: {
    // 设置需要缓存的页面name
    SET_KEEP_ALIVE: (state, keepAlive) => {
      state.keepAlive = keepAlive
  },
  },
  actions: {},
  modules: {},
});

2. 在路由页面设置meta keepVlive

{
    // 列表
    path: "/List",
    name: "List",
    meta: {
      title: "设置缓存",
      keepAlive: true,
    },
    component: (resolve) =>
      require(["@/views/List/List.vue"], resolve),
  },

3.在app.vue中配置需要缓存的页面组件

<template>
  <div id="app">
    <keep-alive :include="keepAlive">
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  created() {
    
  },

  computed: {
    keepAlive() {
      return this.$store.getters.keepAlive
    }
  }
}

4.在列表页面设置需要缓存的页面

 beforeRouteEnter(to, from, next) {
    next(vm => {
    // 如果是从Home页面进来的话清空缓存数组。
      if (from.name == 'Home') {
        vm.$store.commit('SET_KEEP_ALIVE', [''])
      }
    })
  },
  beforeRouteLeave(to, from, next) {
   // 进入详情页，缓存List页。
    if (to.name == 'Detail') {
      this.$store.commit('SET_KEEP_ALIVE', ['List'])
    } else {
    
      this.$store.commit('SET_KEEP_ALIVE', [''])
    }	
    next()
  },
  // 切记此处的name与路由里面的Name一定要保持一致
  name: 'List',

如此就很完美的解决了按需缓存的需求啦，当然也可以使用exclude方法实现我们的需求，不过个人认为使用include 就完全可是实现我们的需求啦