vue3如何通過動態(tài)綁定exclude在退出登錄時清除keepAlive緩存

更新時間：2025年04月28日 14:11:59 作者：Tt濤㏒

這篇文章主要介紹了vue3如何通過動態(tài)綁定exclude在退出登錄時清除keepAlive緩存問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

故障分析

上一個登錄的用戶操作的數據被keepAlive緩存了，這個用戶退出登錄后沒有清除緩存，再次登錄的用戶頁面會加載上一個用戶的緩存數據

解決方案

通過動態(tài)綁定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文件緩存刪除，具體根據實際業(yè)務需求來設置
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')
  //跳轉到登錄頁或自定義頁面（跳轉登錄操作放在最后執(zhí)行）
  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動態(tài)綁定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')
})