欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue-keepAlive按需缓存

程序员文章站 2022-03-04 17:37:04
...

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 就完全可是实现我们的需求啦