首發於： 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的重置。