vue中keepAlive实现缓存及不缓存

前言

总所周知，我们在vue使用keepAlive实现缓存时有相关场景不一定都要缓存，例如:
A页面 (name) = pageA ，B页面（name）= pageB ，

• pageA -> pageB -> pageA （返回到的A页面需要缓存，路由返回页面情况）
• pageA -> pageB -> pageA （返回到的A页面不需要缓存，点击菜单到页面情况）

功能实现

1、我们使用vue模板的标签keep-alive，其中的属性inclide 实现。

代码如下：

<template>
	<keep-alive :include="$store.state.keepAlive">
            <router-view></router-view>
    </keep-alive>
</template>

2、可以看到我们需要配合vuex的状态管理来共同实现。

在state先定义keepAlive

const state = {
	// keepalive缓存
  	keepAlive: [],
}
export default state;

然后在一个公共方法中定义个keepAlive函数全局调用（或者在vuex的action中定义这个函数，原理一样）

我使用公共方法public.js

// public.js
import Store from '@/store/index.js'

export default class Public {
	/**
     * keepAlive 缓存
     */
    static keepAlive() {
		const keep = [
			// 需要缓存的页面放入其中
			'pageA',
			'pageB'
		]
		// 在state状态中的keepAlive为空，赋值完以上的include就有相应的缓存
		if (Store.state.keepAlive == '') {
      		Store.commit('KEEPALIVE', keep)
      		return
    	}
    	// 这里就是我们不需要缓存时，先清空状态里的keepAlive，缓存失效。
    	// 用定时器再重新赋值，建立缓存
    	Store.commit('KEEPALIVE', [])
	    setTimeout(() => {
	      Store.commit('KEEPALIVE', keep)
	    }, 100)
	}
}

3、在main.js的页面加载前，全局加载公共方法public.js，以及调用keepAlive方法

main.js

// main.js
import Public from "./assets/js/Public";

Vue.prototype.$Public = Public;
// 执行一次该方法，生成缓存
Public.keepAlive()

const app = new Vue({
  router,
  store,
  render: (h) => h(App),
});

app.$mount("#app");

4、相关的pageA及pageB页面操作

PageA：从A页面去往B页面，通过路由跳转。

<template>
	<div>
		<p>A页面</p>
		<button @click="toPageB">前往B页面</button>
	</div>
</template>
<script>
export default {
	name: 'pageA',
	methods:{
		toPageB(){
			this.$router.push({
				name:'pageB'
			})
		}
	}
}	
</script>

PageB：在B页面返回A页面，可有以下两种操作。

<template>
	<div>
		<p>B页面</p>
		<button @click="backPageAcache">返回A页面缓存</button>
		<button @click="backPageAunCache">返回A页面不缓存</button>
	</div>
</template>
<script>
export default {
	name: 'pageB',
	methods:{
		backPageAcache(){
			// 如果返回的A页面需要缓存，直接返回即可
			this.$router.back()
		},
		backPageAunCache(){
			// 如果返回的A页面不需要缓存, 先执行公共方法里的keepAlive清空缓存，再返回
			this.$Public.keepAlive()
			this.$router.back()
		}
	}
}	
</script>

总结

以上的代码实现，功能逻辑简单。也是自己在实际项目中摸索到的，可以借鉴。