vue项目实现缓存方案

此方案比较复杂，以抛弃，优雅实现方式另见：https://blog.csdn.net/weixin_44132197/article/details/107662998

需求：

商品列表页 跳转到 商品详情页，在从 商品详情页 返回 列表页，要求列表页添加缓存，使用keep-alive的include(添加缓存的列表) 、ecclude(不添加缓存的列表)和路由的钩子函数，灵活实现缓存；

详情看代码；

// 
<keep-alive :include=cachePageName :exclude=noCachePage>
       <router-view></router-view>
</keep-alive>

import {mapGetters} from 'vuex'
 export default {
   name: "appMain",
   computed: {
     ...mapGetters({
       'noCachePage': 'noCachePage',   	     //任何名称匹配的组件都不会被缓存  值为组件的 name 名  通过改变noCachePage的值来控制是否缓存；
       'cachePageName':'cachePageName'		//只有名称匹配的组件会被缓存。值为组件的 name 名，
     })
   },
   data(){
     return{
     }
   }
 }

列表页处理

 export default {
     name: "shopIndex",				//列表页的name
      data() {
   		return {}
   	}，
      beforeRouteEnter (to, from, next) {
       next(vm => {
         // 通过 `vm` 访问组件实例		
         vm.$store.dispatch("noCachebuFunc",{type:2,pageName:"shopIndex"});	//页面一打开将组件name从exclude（不缓存列表）移除；
       })
     },
     beforeRouteLeave(to,from,next){	//离开列表页时，进行判断，是否缓存；
       if(to.name==='ShopCheck'){		//去详情页，需要缓存，不做任何处理
         next()
       }else{
         this.$store.dispatch("noCacheFunc",{type:1,pageName:"shopIndex"});	//去的不是详情页，也不需要缓存，将组件的name值push到exclude列表
         next()
       }
     },
 }

vuex代码

//actions
/*取消缓存页面 name*/
export const noCacheFunc = function ({commit},pageNameObj) {
 commit(cacheFunc,pageNameObj)
}
//mutation
cacheFunc(state, data) {
   if(data.type == 3){
     state.noCachePage=[];
     return;
   }
   let index = state.noCachePage.indexOf(data.pageName)
   // type:1 保存， 2 删除；
   if(data.type == 1){
     if(index<0){
       state.noCachePage.push(data.pageName);
     }
     return;
   }
   if(data.type == 2){
     if(index<0){
       return;
     }
     state.noCachePage.splice(index,1);
   }
 },
//state
noCachePage:[],            //取消缓存的页面
 cachePageName:["homeIndex","shopIndex","apartmentPage"],           //需要缓存的页面,固定值

//getters
export const cachePageName = state => state.cachePageName
export const noCachePage = state => state.noCachePage
 

--------------------------------------------------------------------------end----------------------------------------------------------