缓存 Vue 变量
缓存变量,避免在组件销毁时丢失,可以按需缓存变量,支持清除缓存。
原生
keep-alive
组件仅支持缓存不支持清除缓存。可使用此方法更自由的缓存变量。
INFO
如:缓存二级页数据,回到二级页之前的页面时清除缓存的数据
首页 -> 二级页 (使用默认数据)
二级页 -> 三级页 (缓存跳转页面前的数据)
二级页 <- 三级页 (返回到二级页还原缓存的数据)
首页 <- 二级页 (返回到首页清除二级页缓存的数据)
首页 -> 二级页 (使用默认数据)
ts
import { Ref, onActivated, onBeforeUnmount, onMounted } from 'vue-demi'; // or vue
const cache = new Map<any, any[]>();
export function useCache(key: any, refs: Ref[]) {
if (cache.has(key)) cache.get(key)?.forEach((it, i) => (refs[i].value = it));
onBeforeUnmount(() => {
const values = refs.map(it => it.value);
cache.set(key, values);
});
}
export function useClearCache(keys: any[]) {
onMounted(() => keys.forEach(it => cache.delete(it)));
onActivated(() => keys.forEach(it => cache.delete(it)));
}
使用方法
vue
<script setup lang="ts">
import { ref } from 'vue-demi';
import { useClearCache } from './cache';
// 回到首页时清除缓存
useClearCache('key');
</script>
vue
<script setup lang="ts">
import { ref } from 'vue-demi';
import { useCache } from './cache';
const a = ref('a');
const b = ref(0);
// 离开此页时缓存变量
useCache('key', [a, b]);
</script>