vue3 keep-alive动态缓存以及缓存后不触发activated deactivated 生命周期问题

最近用到keep-alive缓存表单数据，（A-->B-->C）从C返回，缓存B页面，A到B更新数据。适用于A是表格用于展示，去B页面新增，在新增过程中发现要选的选项没有，然后去C页面添加一个选项后返回B。

思路：在vuex定义一个keepAlive数组用于keep-alive内置标签的include属性

用前进推入后退删除的做法更改keepAlive数组，具体代码如下

先写缓存标签

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="keepAlive">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

在vuex中写入方法

 state() {
    return {
      keepAlive: [], //缓存页面数组
    };
  },
  mutations: {
    // 动态缓存页面
    keepAliveChange(state, name) {
      let index = state.keepAlive.findIndex((item) => item === name);
      if (index > -1) {
        state.keepAlive.splice(index + 1);
      } else {
        state.keepAlive.push(name);
      }
    },
    }

最后在路由前置守卫中调用，别忘了配置name属性，我这里写到了meta中，页面配置name如果用的setup语法糖的话可以再写一个script标签，觉得不优雅的话可以下载插件直接在原script上加name属性。

//路由前置守卫
router.beforeEach((to, from, next) => {
  if (to.meta.name) {
    store.commit("keepAliveChange", to.meta.name);
  }
  next();
});

此时就大功告成了，可是我发现缓存后不触发activated deactivated 生命周期很是困惑，经过查找发现是proxy代理的问题，请看下方代码

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="store.state.keepAlive">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

此时需要缓存的数组是经过proxy代理过的，需要把他改成原始的数组

<script setup>
import { computed } from "vue";
import { useStore } from "vuex"; // 引入useStore 方法
const store = useStore();

const keepAlive = computed(() => [...store.state.keepAlive]);
</script>

然后把include的值改为keepAlive即可