快捷導(dǎo)航

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

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

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

在vue開(kāi)發(fā)中使用keepAlive來(lái)緩存組件是比較常見(jiàn)的做法，但是當(dāng)我們需要實(shí)現(xiàn)退出登錄功能時(shí)就會(huì)發(fā)現(xiàn)，跳轉(zhuǎn)到登錄頁(yè)面后再次登錄還殘留著上一個(gè)用戶緩存的數(shù)據(jù)

故障分析

上一個(gè)登錄的用戶操作的數(shù)據(jù)被keepAlive緩存了，這個(gè)用戶退出登錄后沒(méi)有清除緩存，再次登錄的用戶頁(yè)面會(huì)加載上一個(gè)用戶的緩存數(shù)據(jù)

解決方案

通過(guò)動(dòng)態(tài)綁定exclude屬性來(lái)決定需要排除哪些組件不需要緩存
使用vuex來(lái)存放需要排除緩存的組件名稱(chēng)

退出登錄按鈕邏輯部分

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

const store = useStore()
const router = useRouter()
  
//將需要清除緩存的組件名存放在exclude中（<script setup>模式下只需填寫(xiě)vue組件名，不需要寫(xiě)文件后綴名）
//也可以存放一個(gè)正則表達(dá)式讓所有.vue文件緩存刪除，具體根據(jù)實(shí)際業(yè)務(wù)需求來(lái)設(shè)置
const exclude = ref<string>("Goods,Home,Order,Type,User,Login")

const out = () => {
  //清除用戶token
  sessionStorage.removeItem('o_m_s')
  //通過(guò)store.commit提交修改vuex中exclude數(shù)據(jù)，并將上面定義的exclude傳遞給vuex
  store.commit('changeExcludeOut', exclude.value)
  //清除權(quán)限列表
  store.commit('out')
  //跳轉(zhuǎn)到登錄頁(yè)或自定義頁(yè)面（跳轉(zhuǎn)登錄操作放在最后執(zhí)行）
  router.replace('/')
 }

vuex部分邏輯

import {createStore} from 'vuex'

export default createStore({
  state() {
    return {
      //用戶信息和權(quán)限列表
      info: null,
      //默認(rèn)排除組件列表
      exclude: "Login"
    }
  },
  getters: {},
  mutations: {
    //清除權(quán)限列表
    out(state) {
      state.info = null
    },
    //清除keepAlive緩存，用于退出登錄
    changeExcludeOut(state, value) {
      state.exclude = value
    },
    //重新設(shè)置排除列表，用于跳轉(zhuǎn)到登錄頁(yè)
    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動(dòng)態(tài)綁定exclude，數(shù)據(jù)從vuex中提取  -->
    <keep-alive :exclude="store.state.exclude">
      <component :is='Component'></component>
    </keep-alive>
  </router-view>
</template>

import {useStore} from 'vuex'
const store = useStore()

登錄頁(yè)邏輯部分

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

const store = useStore()

//在login組件掛載前通過(guò)store.commit重新修改vuex中的排除列表
onBeforeMount(() => {
  store.commit('changeExcludeLogin')
})