Nuxt3中使用状态记录并控制keepalive列表。

在Nuxt3页面级keepalive不可用问题已在v3.11版本中得到很好的解决，这里提供一个示例方法。 首先得明白造成此问题的原因是keepalive的include项默认读取from.matched[0].components.default.__name的值，该值为vue默认组件的名称，但nuxt默认为文件路由作为名称。因此我们可以在中间件中添加如下代码来解决一致性问题： ``` //middleware from.matched[0].components.default.__ name = from.name; useAliveList('add', from.name?. toString()); ``` 这里用到了nuxt3的useState，创建了一个useAliveList来记录状态，当然你也可以使用pinia来记录。将默认组件名称替换为from.name，且将from.name添加到useState或pinia状态的列表中。 在app.vue需要useState或pinia中记录的列表放到keepalive的include项的值，同时需要添加pageKey值。以下为示例代码： ``` <template> <NuxtLayout> <NuxtLoadingIndicator color="#3366ff" class="shadow-md shadow-blue-400" /> <NuxtPage :keepalive="{include:alive}" :pageKey="route=>route.fullPath"/> </NuxtLayout> </template> <script setup lang="ts"> const route=useRoute(),aliveList=useAliveList(); const alive=computed(()=>aliveList.value.join(',')); </script> ```