首發於: https://lonhon.top
近來碰到的一個場景,由於項目的權限體系+路由掌握頂用到了vuex存儲全局數據,在登出時須要將一切數據舉行重置or清空。
比方 store.state.username初始為” => 上岸后變成’張三’ => 登出后照樣’張三’,此時須要置為”.
處理要領0.1
actions.resetVuex = function() {
store.commit(state.a, null)
store.commit(state.b, null)
store.commit(state.c, null)
...
}
store.dispatch('resetVuex')
一開始的主意是建立一個action完成vuex重置,在登出時挪用該放要領即可。
然則 這類要領須要手動保護,而且一個個寫上去覺得太low了,隨後又想到能夠經由過程遍歷store.state舉行一切重置,然則這類要領有一個弊病就是假如重置的值有差別的初始值的話,賦值的時刻就很麻煩了。
總之,上面的要領和搜刮出來的要領都不盡人意,然則迫於無法就先用着第一種了。
處理要領1.0
就在上述要領寫到一半的時刻遽然靈光一閃,我特么之前為了store的數據耐久化不被頁面F5重置還專門把數據放在SessionStorage這些當地存儲里,如今一個個去重置覺得像個睿智, 在登出的時刻革新頁面就可以到達store重置的結果了 。
經由過程頁面重載要領window.location.reload()能夠手動革新頁面,下面上完美流程代碼:
// 1.登出要領
logout() {
window.localStorage.clear()
window.sessionStorage.clear()
clearCookie()
this.$router.push({ name: 'Login' })
}
// 2.登錄頁面 / js部份
data() {
return {
isReload: false // 默許不顯現頁面內容
}
},
created() {
if (this.$store.getters.addRouters.length > 0) { // 推斷是不是已革新
return window.location.reload()
}
// 正式顯現頁面內容
this.isReload = true
}
// 3.登錄頁面 / template部份
<template>
<div v-if="isRolad">
...
</div>
</template>
注重,在登錄頁面的created鈎子中,假如直接舉行reload要領,會湧現頁面一連革新的題目:登錄頁面加載到一半,內容已顯現的情況下會再次革新,這類體驗一定要被產物懟差評。
所以此處用到兩個要領來處理兩次革新的題目
- 登錄頁面中template運用v-if掌握顯現
- 依據store是不是有數據推斷是不是重置,假如數據另有值,則reload(),此時由於isReload的默許值為false,所以登錄頁面在革新前不會顯現任何內容。革新后,將isRolad賦值為true從而顯現頁面內容。
末了,一個簡樸的reload要領就完成了vuex的重置。