Vue set up语法糖中设置组件的name属性

这是我的layout文件

        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <KeepAlive :include="tagsViewStore.cachedViews">
              <component :is="Component" />
            </KeepAlive>
          </transition>
        </router-view>

在pinia中实时记录需要缓存的组件名称，但是tagsViewStore.cachedViews 中需要组件名称的数字组，我们需要给每一个组件设置name属性才可以进行缓存。

参考若依的引用列表，发现若依使用了unplugin-vue-setup-extend-plus 配合<script name="xxxx"></script>来指定组件name，从而实现KeepAlive缓存组件状态，我们参考若依来实现一下这个功能。

这是若依关于缓存的说明：https://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html#%E9%A1%B5%E7%AD%BE%E7%BC%93%E5%AD%98

掘金这篇文章介绍的很详细：https://juejin.cn/post/7171343547495350302

1. 按照包的文档，我们来将包引入到项目中：

npm i unplugin-vue-setup-extend-plus

2.在vite.config.ts中，使用插件

import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'

export default defineConfig({
  plugins: [
    vueSetupExtend({ /* options */ }),
  ],
})

3.在script标签中添加name属性

<script setup lang="ts" name="debugging"></script>

这样在F12在Vue插件中看当前组件就有名字啦 ！