vue3通过动态绑定exclude在退出登录时清除keepAlive缓存

vue: 3.2.13 (script setup模式)

在vue开发中使用keepAlive来缓存组件是比较常见的做法，但是当我们需要实现退出登录功能时就会发现，跳转到登录页面后再次登录还残留着上一个用户缓存的数据

故障分析

上一个登录的用户操作的数据被keepAlive缓存了，这个用户退出登录后没有清除缓存，再次登录的用户页面会加载上一个用户的缓存数据

解决方案

• 通过动态绑定exclude属性来决定需要排除哪些组件不需要缓存
• 使用vuex来存放需要排除缓存的组件名称

退出登录按钮逻辑部分

import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
import {ref} from "vue";

const store = useStore()
const router = useRouter()
  
//将需要清除缓存的组件名存放在exclude中（<script setup>模式下只需填写vue组件名，不需要写文件后缀名）
//也可以存放一个正则表达式让所有.vue文件缓存删除，具体根据实际业务需求来设置
const exclude = ref<string>("Goods,Home,Order,Type,User,Login")

const out = () => {
  //清除用户token
  sessionStorage.removeItem('o_m_s')
  //通过store.commit提交修改vuex中exclude数据，并将上面定义的exclude传递给vuex
  store.commit('changeExcludeOut', exclude.value)
  //清除权限列表
  store.commit('out')
  //跳转到登录页或自定义页面（跳转登录操作放在最后执行）
  router.replace('/')
 }

vuex部分逻辑

import {createStore} from 'vuex'

export default createStore({
  state() {
    return {
      //用户信息和权限列表
      info: null,
      //默认排除组件列表
      exclude: "Login"
    }
  },
  getters: {},
  mutations: {
    //清除权限列表
    out(state) {
      state.info = null
    },
    //清除keepAlive缓存，用于退出登录
    changeExcludeOut(state, value) {
      state.exclude = value
    },
    //重新设置排除列表，用于跳转到登录页
    changeExcludeLogin(state){
      state.exclude = "Login"
    }
  },
  actions: {},
  modules: {}
})

app.vue部分

<template>
  <nav-bar v-if="route.meta.navBar"></nav-bar>
  <router-view v-slot='{Component}'>
    <!--  使用v-bind动态绑定exclude，数据从vuex中提取  -->
    <keep-alive :exclude="store.state.exclude">
      <component :is='Component'></component>
    </keep-alive>
  </router-view>
</template>

import {useStore} from 'vuex'

const store = useStore()

登录页逻辑部分

import {onBeforeMount} from 'vue'
import {useStore} from 'vuex'

const store = useStore()

//在login组件挂载前通过store.commit重新修改vuex中的排除列表
onBeforeMount(() => {
  store.commit('changeExcludeLogin')
})