keep-alive 前进刷新后退缓存

keep-alive

实际工作中,常常会遇到这样的需求, 在列表页进入详情页或者编辑页的时候, 再返回列表页,如果没有做缓存操作的话,可能会导致表单查询的条件被清空, 需要重新选择筛选条件. 所以这个时候需要缓存, 列表页.如何实现呢:

route/ index.js
举例
可以假设一个缓存对象, 对于这个缓存对象来说 key代表的是列表路由的名称
value 对应的 是详情页或者编辑页的路由名数组
同时 写一个方法用于翻转这个对象

let cacheObj = {
  'goodsSku': ['skuEdit', 'relevantCity', 'tagManage', 'skuAdd', 'cityRelevantCategory', 'cityRelevantStore',
    'cityRelevantGoods'],
  'bgxxGoods': ['bgxxEdit', 'relevantCity', 'bgxxAdd', 'cityRelevantCategory', 'cityRelevantStore',
    'cityRelevantGoods', 'mixGoodsEdit', 'relevantBgxxGoods']\
}
let reverseObj = (obj) => {
  let newObj = {}
  for (let [key, value] of Object.entries(obj)) {
    value.forEach((item) => {
      if (newObj[item]) {
        newObj[item].push(key)
      } else {
        newObj[item] = [key]
      }
    })
  }
  return newObj
}
let reverseCacheObj = reverseObj(cacheObj)
// 翻转结果如下例子: 
{ skuEdit: [ 'goodsSku' ],
  relevantCity: [ 'goodsSku' ],
  tagManage: [ 'goodsSku' ],
  skuAdd: [ 'goodsSku' ],
  cityRelevantCategory: [ 'goodsSku' ],
  cityRelevantStore: [ 'goodsSku' ],
  cityRelevantGoods: [ 'goodsSku' ] }

let router = new Router({
  routes: Routes
})

router.beforeEach((to, from, next) => {
  // 开始进入页面默认缓存
  if (Object.keys(cacheObj).indexOf(to.name) !== -1) {
    store.commit('addCachedViews', to.name)
  }
  // 离开判断，不是去其所属页面则去除缓存
  if (Object.keys(cacheObj).indexOf(from.name) !== -1) {
    if (cacheObj[from.name].indexOf(to.name) !== -1) {
      store.commit('addCachedViews', from.name)
    } else {
      store.commit('delCachedViews', from.name)
    }
  }
  // 反向判断，其所属页面进入其所属页面其他页面或者其页面以外页面则清楚缓存
  if (Object.keys(reverseCacheObj).indexOf(from.name) !== -1) {
    let cacheName = reverseCacheObj[from.name]
    if (cacheName.indexOf(to.name) === -1) {
      cacheName.forEach((name) => {
        if (cacheObj[name].indexOf(to.name) === -1) {
          store.commit('delCachedViews', name)
        }
      })
    }
  }
  next()
})

export default router
---------------------------
layout.vue
    <div class="c-app-content" >
      <keep-alive :include="cachedViews">
        <router-view></router-view>
      </keep-alive>
    </div>

  watch: {
    $route (val) {
      // 一直需要缓存的组件
      if (val.meta.alwaysAlive) {
        this.$store.commit('addCachedViews', val.name)
      }
      this.getBreadcrumb()
    }
  },
  computed: {
    cachedViews () {
      return this.$store.state.cachedViews
    }
  },
  ----------------------------
  store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    cachedViews: []
  },
  mutations: {
    addCachedViews (state, view) {
      if (state.cachedViews.indexOf(view) !== -1) return
      state.cachedViews.push(view)
    },
    delCachedViews (state, view) {
      for (const i of state.cachedViews) {
        if (i === view) {
          const index = state.cachedViews.indexOf(i)
          state.cachedViews.splice(index, 1)
        }
      }
    }
  }
})

xuanweiH / Project-issue

keep-alive 前进刷新后退缓存 #2

keep-alive