快速重置vuex數據 - Vue

首發於： 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方法，會出現頁面連續刷新的問題:登陸頁面加載到一半，內容已經顯示的狀況下會再次刷新，這種體驗確定要被產品懟差評。

因此此處用到兩個方法來解決兩次刷新的問題

1. 登陸頁面中template使用v-if控制顯示
2. 根據store是否有數據判斷是否重置，若是數據還有值，則reload()，此時由於isReload的默認值爲false，因此登陸頁面在刷新前不會顯示任何內容。刷新後，將isRolad賦值爲true從而顯示頁面內容。

最後，一個簡單的reload方法就完成了vuex的重置。