缓存 Vue 变量

缓存变量，避免在组件销毁时丢失，可以按需缓存变量，支持清除缓存。

原生 keep-alive 组件仅支持缓存不支持清除缓存。

可使用此方法更自由的缓存变量。

INFO

如：缓存二级页数据，回到二级页之前的页面时清除缓存的数据

首页 -> 二级页 （使用默认数据）

二级页 -> 三级页 （缓存跳转页面前的数据）

二级页 <- 三级页 （返回到二级页还原缓存的数据）

首页 <- 二级页 (返回到首页清除二级页缓存的数据)

首页 -> 二级页 （使用默认数据）

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)));
}

使用方法

首页

<script setup lang="ts">
import { ref } from 'vue-demi';
import { useClearCache } from './cache';
// 回到首页时清除缓存
useClearCache('key');
</script>

二级页

<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>