Vue3 keep-alive使用

使用keep-alive好处

1.可以缓存组件，提升性能

2.可以提升用户体验，比如后台管理系统：在A标签输入内容，切换到B标签，如果缓存了A标签，则输入的内容还在

在Vue3中的纯setup写法，缓存组件，但使用setup语法带来的一个问题就是无法自己设置name，而当我们使用keep-alive往往是需要name的，解决办法：

安装插件：

1.安装

npm i vite-plugin-vue-setup-extend

2.配置vite.config.js

import { defineConfig } from 'vite'
import vue from "@vitejs/plugin-vue";
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
 
export default defineConfig({
  plugins: [
    vue(),
    VueSetupExtend()
  ]
})

3.使用

3.1 使用keep-alive的地方

<template>      
    <div>
        <router-view>
          <keep-alive :include='keepAliveRoute'>
            <component :is='Component' :key='route.path' />
          </keep-alive>
        </router-view>
      </div>
</template>

<script setup>
    import { storeToRefs } from 'pinia'
    let menuStore = useMenuStore()
    let keepStore = useKeepStore()
    const { keepAliveRoute } = storeToRefs(keepStore)
</script>

import { defineStore } from 'pinia'

export const useKeepStore = defineStore('keepId', {
  state: () => {
    return {
      // 要缓存的组件名称
      keepAliveRoute: ['仪表盘']
    }
  },
  actions: {
    pushKeepAlive(name) {
      if (!this.keepAliveRoute.includes(name)) {
        this.keepAliveRoute.push(name)
      }
    }
  }
})

3.2缓存的组件

<template>
  <div>
    <h2>Home</h2>
  </div>
</template>

<script setup lang="ts" name='仪表盘'>
import { onBeforeMount } from 'vue';
onBeforeMount(() => {
  console.log(12);
})
</script>

 注意这里的 name='仪表盘'   要与pinia中 要缓存的组件名称：keepAliveRoute: ['仪表盘'] 一致