資訊專欄INFORMATION COLUMN
摘要：首發(fā)于最近遇到的一個(gè)場景，由于項(xiàng)目的權(quán)限系統(tǒng)路由控制中用到了存儲(chǔ)全局?jǐn)?shù)據(jù)，在登出時(shí)需要將所有數(shù)據(jù)進(jìn)行重置清空。刷新后，將賦值為從而顯示頁面內(nèi)容。最后，一個(gè)簡單的方法就完成了的重置。
首發(fā)于： https://lonhon.top
最近遇到的一個(gè)場景，由于項(xiàng)目的權(quán)限系統(tǒng)+路由控制中用到了vuex存儲(chǔ)全局?jǐn)?shù)據(jù)，在登出時(shí)需要將所有數(shù)據(jù)進(jìn)行重置or清空。
比如 store.state.username初始為"" => 登陸后變成"張三" => 登出后還是"張三"，此時(shí)需要置為"".
解決方法0.1actions.resetVuex = function() {
store.commit(state.a, null)
store.commit(state.b, null)
store.commit(state.c, null)
...
}
store.dispatch("resetVuex")
一開始的想法是創(chuàng)建一個(gè)action實(shí)現(xiàn)vuex重置，在登出時(shí)調(diào)用該放方法即可。
但是 這種方法需要手動(dòng)維護(hù)，而且一個(gè)個(gè)寫上去感覺太low了，隨后又想到可以通過遍歷store.state進(jìn)行所有重置，但是這種方法有一個(gè)弊端就是如果重置的值有不同的初始值的話，賦值的時(shí)候就很麻煩了。
總之，上面的方法和搜索出來的方法都不盡人意，但是迫于無奈就先用著第一種了。
解決方法1.0就在上述方法寫到一半的時(shí)候忽然靈光一閃，我特么之前為了store的數(shù)據(jù)持久化不被頁面F5重置還專門把數(shù)據(jù)放在SessionStorage這些本地存儲(chǔ)里，現(xiàn)在一個(gè)個(gè)去重置感覺像個(gè)睿智， 在登出的時(shí)候刷新頁面就能達(dá)到store重置的效果了 。
通過頁面重載方法window.location.reload()可以手動(dòng)刷新頁面，下面上完善流程代碼:
// 1.登出方法
logout() {
window.localStorage.clear()
window.sessionStorage.clear()
clearCookie()
this.$router.push({ name: "Login" })
}
// 2.登錄頁面 / js部分
data() {
return {
isReload: false // 默認(rèn)不顯示頁面內(nèi)容
}
},
created() {
if (this.$store.getters.addRouters.length > 0) { // 判斷是否已經(jīng)刷新
return window.location.reload()
}
// 正式顯示頁面內(nèi)容
this.isReload = true
}
// 3.登錄頁面 / template部分
...
注意，在登錄頁面的created鉤子中，如果直接進(jìn)行reload方法，會(huì)出現(xiàn)頁面連續(xù)刷新的問題:登錄頁面加載到一半，內(nèi)容已經(jīng)顯示的情況下會(huì)再次刷新，這種體驗(yàn)肯定要被產(chǎn)品懟差評。
所以此處用到兩個(gè)方法來解決兩次刷新的問題
登錄頁面中template使用v-if控制顯示
根據(jù)store是否有數(shù)據(jù)判斷是否重置，如果數(shù)據(jù)還有值，則reload()，此時(shí)因?yàn)閕sReload的默認(rèn)值為false，所以登錄頁面在刷新前不會(huì)顯示任何內(nèi)容。刷新后，將isRolad賦值為true從而顯示頁面內(nèi)容。
最后，一個(gè)簡單的reload方法就完成了vuex的重置。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95309.html
摘要：為了做到頁面的極致優(yōu)化，我們需要將那些閑置的狀態(tài)重置，以減小占用的內(nèi)存空間。不如當(dāng)路由改變時(shí)去重置中的所有狀態(tài)。這里只是提供一種重置狀態(tài)的一種方案，如果有更好方案還請各位看官留言。 前言 大型單頁應(yīng)用（后面都是指spa），我們往往會(huì)通過使用狀態(tài)管理器 vuex 去解決組件間狀態(tài)共享與狀態(tài)傳遞等問題。這種應(yīng)用少則幾十個(gè)單頁，多則上百個(gè)單頁。隨著路由的頻繁切換，每個(gè)路由對應(yīng)的 vuex 中...
摘要：各位看官?zèng)]看過功能梳理的可以先閱讀下源碼學(xué)習(xí)一功能梳理前車之鑒有了源碼學(xué)習(xí)的經(jīng)驗(yàn)，每次看認(rèn)真鉆研源代碼的時(shí)候都會(huì)抽出一小段時(shí)間來大體瀏覽一遍源代碼。大體了解這個(gè)源代碼的脈絡(luò)，每個(gè)階段做了什么，文件目錄的劃分。 各位看官 沒看過功能梳理的可以先閱讀下Vuex源碼學(xué)習(xí)（一）功能梳理. 前車之鑒 有了vue-router源碼學(xué)習(xí)的經(jīng)驗(yàn)，每次看認(rèn)真鉆研源代碼的時(shí)候都會(huì)抽出一小段時(shí)間來大體瀏覽一...
摘要：可以配合相關(guān)的官方文檔學(xué)習(xí)。上面的內(nèi)容說的重點(diǎn)，其實(shí)也算是項(xiàng)目的全部啦項(xiàng)目地址感覺還不錯(cuò)的話就請給個(gè)吧謝謝有什么問題歡迎提問 項(xiàng)目地址：vue-simple-template共三個(gè)角色：adan barbara carrie 密碼全是：123456 adan 擁有 最高權(quán)限A 他可以看到 red , yellow 和 blue 頁面（共三個(gè)頁面）barbara 擁有 權(quán)限B 他可以看到...
摘要：調(diào)用鉤子渲染一波，然后把渲染后的元素賦值給并取代。大和小同為漸進(jìn)式框架，提供了大量的對數(shù)據(jù)視圖去進(jìn)行處理。微信小程序我選擇用原生主要是因?yàn)轭A(yù)覽還要再開一個(gè)很不開心。 前言 刷了一波 react 文檔,想找個(gè)東西練練手，在網(wǎng)上一看，什么實(shí)現(xiàn)一個(gè) 網(wǎng)易云、酷狗音樂、豆瓣 感覺找接口都?jí)蛸M(fèi)神了,之前做過 vue 實(shí)現(xiàn)餓了么的一個(gè)系統(tǒng)，圖片資源，mock 數(shù)據(jù)齊全，再加之樣式寫過了，所以直接就...
摘要：這里為什么是一個(gè)數(shù)組呢因?yàn)檫@就是標(biāo)題所描述的可定制，如果頁面內(nèi)重置絕大部分狀態(tài)，但需要保留其中一些狀態(tài)的時(shí)候我們可以通過我們傳遞過來的值來剔除相應(yīng)的，使其不被更新。 在正式場景中我們經(jīng)常遇到一個(gè)問題，就是登出頁面或其他操作的時(shí)候，我們需要重置所有的vuex，讓其變?yōu)槌跏紶顟B(tài)，那么，就涉及到了多種方法：1、頁面刷新： window.location.reload() 這個(gè)方法通過路由判斷...
閱讀 1997·2019-08-30 15:54
閱讀 3546·2019-08-30 15:52
閱讀 1833·2019-08-29 17:20
閱讀 2527·2019-08-29 17:08
閱讀 2357·2019-08-26 13:24
閱讀 805·2019-08-26 11:59
閱讀 2790·2019-08-23 14:50
閱讀 627·2019-08-23 14:20
