疾速重置vuex數據 - Vue

2023年9月26日 227次阅读 来源: 游龍翔隼

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

    原文作者：游龍翔隼
    原文地址: https://segmentfault.com/a/1190000015053839
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞