快速重置vuex數據 - Vue

wyk1184 發布于2019-08-22 17:35 / 3664人閱讀

摘要：首發于最近遇到的一個場景，由于項目的權限系統路由控制中用到了存儲全局數據，在登出時需要將所有數據進行重置清空。刷新后，將賦值為從而顯示頁面內容。最后，一個簡單的方法就完成了的重置。

首發于： 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部分

注意，在登錄頁面的created鉤子中，如果直接進行reload方法，會出現頁面連續刷新的問題:登錄頁面加載到一半，內容已經顯示的情況下會再次刷新，這種體驗肯定要被產品懟差評。

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

登錄頁面中template使用v-if控制顯示

根據store是否有數據判斷是否重置，如果數據還有值，則reload()，此時因為isReload的默認值為false，所以登錄頁面在刷新前不會顯示任何內容。刷新后，將isRolad賦值為true從而顯示頁面內容。

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

云服務器 GPU云服務器 Vue_Vuex Vuex vuex cdn django vue 數據綁定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95309.html

vuex 閑置狀態重置方案

摘要：為了做到頁面的極致優化，我們需要將那些閑置的狀態重置，以減小占用的內存空間。不如當路由改變時去重置中的所有狀態。這里只是提供一種重置狀態的一種方案，如果有更好方案還請各位看官留言。前言大型單頁應用（后面都是指spa），我們往往會通過使用狀態管理器 vuex 去解決組件間狀態共享與狀態傳遞等問題。這種應用少則幾十個單頁，多則上百個單頁。隨著路由的頻繁切換，每個路由對應的 vuex 中...

junfeng777 2019-08-21 18:36 評論0 收藏0
Vuex源碼學習（二）脈絡梳理

摘要：各位看官沒看過功能梳理的可以先閱讀下源碼學習一功能梳理前車之鑒有了源碼學習的經驗，每次看認真鉆研源代碼的時候都會抽出一小段時間來大體瀏覽一遍源代碼。大體了解這個源代碼的脈絡，每個階段做了什么，文件目錄的劃分。各位看官沒看過功能梳理的可以先閱讀下Vuex源碼學習（一）功能梳理. 前車之鑒有了vue-router源碼學習的經驗，每次看認真鉆研源代碼的時候都會抽出一小段時間來大體瀏覽一...

chenjiang3 2019-08-23 16:18 評論0 收藏0
vue vuex vue-rouert后臺項目——權限路由（超詳細簡單版）

摘要：可以配合相關的官方文檔學習。上面的內容說的重點，其實也算是項目的全部啦項目地址感覺還不錯的話就請給個吧謝謝有什么問題歡迎提問項目地址：vue-simple-template共三個角色：adan barbara carrie 密碼全是：123456 adan 擁有最高權限A 他可以看到 red , yellow 和 blue 頁面（共三個頁面）barbara 擁有權限B 他可以看到...

olle 2019-08-21 18:29 評論0 收藏0
react 與 vue 使用心得

摘要：調用鉤子渲染一波，然后把渲染后的元素賦值給并取代。大和小同為漸進式框架，提供了大量的對數據視圖去進行處理。微信小程序我選擇用原生主要是因為預覽還要再開一個很不開心。前言刷了一波 react 文檔,想找個東西練練手，在網上一看，什么實現一個網易云、酷狗音樂、豆瓣感覺找接口都夠費神了,之前做過 vue 實現餓了么的一個系統，圖片資源，mock 數據齊全，再加之樣式寫過了，所以直接就...

why_rookie 2019-08-22 18:12 評論0 收藏0
vuex重置所有state(可定制)

摘要：這里為什么是一個數組呢因為這就是標題所描述的可定制，如果頁面內重置絕大部分狀態，但需要保留其中一些狀態的時候我們可以通過我們傳遞過來的值來剔除相應的，使其不被更新。在正式場景中我們經常遇到一個問題，就是登出頁面或其他操作的時候，我們需要重置所有的vuex，讓其變為初始狀態，那么，就涉及到了多種方法：1、頁面刷新： window.location.reload() 這個方法通過路由判斷...

singerye 2019-08-23 14:47 評論0 收藏0