vue項目退出登錄清除store數(shù)據(jù)的三種方法
方法一:(不友好,頁面會白屏,不推薦使用)
在退出登錄的loginOut 方法里面:
window.location.reload()
方法二 : (不會出現(xiàn)白屏,推薦使用)
利用v-if控制router-view,在根組件APP.vue中實現(xiàn)一個刷新方法
<template>
<router-view v-if="isRouterAlive"/> //路由的組件
</template>
<script>
export default {
data () {
return {
isRouterAlive: true
}
},
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(() => (this.isRouterAlive = true))
}
}
}
</script>然后使用的時候調(diào)用: this.reload() 方法
方法三 : vuex清除token (不會出現(xiàn)白屏,推薦使用)
vuex清除token
由于項目中需要一個用戶登出的功能,而數(shù)據(jù)放在Vuex中在登出沒有刷新時數(shù)據(jù)并不會更新
所以找到了這樣一個很不錯的方法
將state以各種方式保存
注冊時調(diào)用函數(shù)賦值
清空時再將保存的state賦值替換當(dāng)前的state
over
1. 首先默認state時要用新的方法注冊
把數(shù)據(jù)寫在函數(shù)的返回值中(其他方法也可以只要能調(diào)用)
const getDefaultState = () => {
return {
token: getToken(),
name: '',
avatar: '',
permList:[]
}
}2. 給Vuex中的state賦值并注冊
const state = getDefaultState();
const store = new Vuex.Store({
modules: {
app,
settings,
state,
permissions
},
getters
})3. 在mutations中定義方法
RESET_STATE: (state) => {
Object.assign(state, getDefaultState())
},4. 頁面中使用
commit('RESET_STATE');
5. 全部完整代碼如下:
const getDefaultState = () => {
return {
token: getToken(),
name: '',
avatar: ''
}
}
const state = getDefaultState()
const mutations = {
RESET_STATE: (state) => {
Object.assign(state, getDefaultState())
},
}
logout({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
removeToken() // must remove token first
resetRouter()
commit('RESET_STATE')
resolve()
}).catch(error => {
reject(error)
})
})
},6. 退出登錄
組件中派發(fā)任務(wù)
async logout() {
await this.$store.dispatch("user/logout");
this.$router.push(`/login?redirect=${this.$route.fullPath}`);
},
},親自測試有效:

第三種方法強烈推薦使用。
總結(jié)
到此這篇關(guān)于vue項目退出登錄清除store數(shù)據(jù)的三種方法的文章就介紹到這了,更多相關(guān)vue退出登錄清除store數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue this.$router.push(參數(shù))實現(xiàn)頁面跳轉(zhuǎn)操作
這篇文章主要介紹了Vue this.$router.push(參數(shù))實現(xiàn)頁面跳轉(zhuǎn)操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
使用Vue指令實現(xiàn)Markdown渲染和代碼高亮
在前端開發(fā)中,我們經(jīng)常需要將Markdown格式的文本渲染成HTML并展示在頁面上,同時還希望能夠?qū)Υa塊進行高亮顯示,今天我將分享一段代碼,通過Vue指令實現(xiàn)了這個功能,需要的朋友可以參考下2023-09-09
Vue3中watch監(jiān)聽對象的屬性值(監(jiān)聽源必須是一個getter函數(shù))
這篇文章主要介紹了Vue3中watch監(jiān)聽對象的屬性值,監(jiān)聽源必須是一個getter函數(shù),本文結(jié)合示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12
vue three.js創(chuàng)建地面并設(shè)置陰影實現(xiàn)示例
這篇文章主要為大家介紹了vue three.js創(chuàng)建地面并設(shè)置陰影實現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08
?用Vue?Demi?構(gòu)建同時兼容Vue2與Vue3組件庫
這篇文章主要介紹了?用Vue?Demi?構(gòu)建同時兼容Vue2與Vue3組件庫,我們通過考慮其功能、工作原理以及如何開始使用它來了解?Vue?Demi,下面我們一起進入文章學(xué)起來吧2022-02-02

