vuex如何重置所有state(可定制)
在正式場(chǎng)景中我們經(jīng)常遇到一個(gè)問(wèn)題,就是登出頁(yè)面或其他操作的時(shí)候,我們需要重置所有的vuex,讓其變?yōu)槌跏紶顟B(tài),
那么,就涉及到了多種方法:
1、頁(yè)面刷新:
window.location.reload()
這個(gè)方法通過(guò)路由判斷優(yōu)化或是邏輯優(yōu)化,始終頁(yè)面時(shí)重新加載,就會(huì)導(dǎo)致用戶(hù)體驗(yàn)很差,對(duì)瀏覽器來(lái)說(shuō)也是一種不必要的負(fù)擔(dān),所以我嘗試之后就放棄了。
2、寫(xiě)一個(gè)重置的方法然后調(diào)取
actions.resetVuex = function() { store.commit(state.a, null) store.commit(state.b, null) store.commit(state.c, null) ... } store.dispatch('resetVuex')
這樣又會(huì)出現(xiàn)多個(gè)module,多個(gè)state,需要手動(dòng)添加多個(gè),工作量巨大且不易維護(hù),而且如果我們state初始是個(gè)個(gè)數(shù)組,一個(gè)對(duì)象這些更不好操作,更優(yōu)最多就是我們初始的時(shí)候深拷貝一份,但是也需要每個(gè)module里進(jìn)行操作和封裝
這兩種方法是可以解決問(wèn)題的,但是我還是沒(méi)有采用這兩種方式,因?yàn)楦杏X(jué)已經(jīng)犧牲了某些東西來(lái)達(dá)成目的了,通過(guò)我反復(fù)的實(shí)踐,和摸索我采取了以下方法:
首先頁(yè)面加載,第一次加載引入store的時(shí)候,store的所有state肯定是初始值,那么我就做一個(gè)本地緩存記錄下來(lái):
這里我采用了store插件(引用方式參考 https://github.com/nbubna/store)
在main.js創(chuàng)建vue實(shí)例之前:
import _store from 'store' import createStore from './store' ... const store = createStore() //我創(chuàng)建好的 vuex庫(kù) _store({ initState: store.state }) //緩存一個(gè)名為initState的初始狀態(tài)
我們知道m(xù)ain.js是頁(yè)面載入的時(shí)候執(zhí)行一次的那么緩存的initState就是自己最開(kāi)始創(chuàng)建store里的state狀態(tài)
(包含了module里的所有state);
然后我們?cè)趕tore創(chuàng)建的全局寫(xiě)一個(gè)mutation方法
這里我采用了store插件(引用方式參考 https://github.com/nbubna/store)
這里我采用了lodash插件(引用方式參考 https://www.lodashjs.com/)
import _ from 'lodash' import _store from 'store2' ... const store = new Vuex.Store({ state: { token: '' }, mutations: { resetAllState (state, payload) { if (payload instanceof Array === false) { // 驗(yàn)證傳入的是一個(gè)數(shù)組 return } const initState = _store('initState') // 取出初始值的緩存 const _initState = payload.length ? _.omit(initState, payload) : initState // 判斷傳入值有無(wú)數(shù)據(jù),有數(shù)據(jù)剔除相對(duì)應(yīng)的值 _.extend(state, _initState) } }, modules: { ... } })
這個(gè)名叫resetAllState的mutation方法里就是講全局的state替換成我們緩存的state。
這里為什么 payload 是一個(gè)數(shù)組呢?
因?yàn)檫@就是標(biāo)題所描述的可定制,如果頁(yè)面內(nèi)重置絕大部分狀態(tài),但需要保留其中一些狀態(tài)的時(shí)候我們可以通過(guò)我們傳遞過(guò)來(lái)的state值來(lái)剔除相應(yīng)的state,使其不被更新。
當(dāng)然我們也可以傳入值來(lái)更新相應(yīng)值,其他所有值不進(jìn)行更新(這里我們就不詳細(xì)說(shuō)明)
以上就是我實(shí)踐思考出來(lái)的方法,可能有不足的地方,歡迎大家提問(wèn)、交流或提出更好的建議。也希望大家多多支持腳本之家。
- SpringBoot+Vue開(kāi)發(fā)之Login校驗(yàn)規(guī)則、實(shí)現(xiàn)登錄和重置事件
- 快速解決Vue、element-ui的resetFields()方法重置表單無(wú)效的問(wèn)題
- Vue切換組件實(shí)現(xiàn)返回后不重置數(shù)據(jù),保留歷史設(shè)置操作
- vue 組件銷(xiāo)毀并重置的實(shí)現(xiàn)
- vue+elementui 對(duì)話(huà)框取消 表單驗(yàn)證重置示例
- vue 強(qiáng)制組件重新渲染(重置)的兩種方案
- Vue 重置data的數(shù)據(jù)為初始狀態(tài)操作
相關(guān)文章
在小程序/mpvue中使用flyio發(fā)起網(wǎng)絡(luò)請(qǐng)求的方法
這篇文章主要介紹了在小程序/mpvue中使用flyio發(fā)起網(wǎng)絡(luò)請(qǐng)求的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09使用VUE和webrtc-streamer實(shí)現(xiàn)實(shí)時(shí)視頻播放(監(jiān)控設(shè)備-rtsp)
WebRTC-streamer是一項(xiàng)使用簡(jiǎn)單機(jī)制通過(guò)WebRTC流式傳輸視頻捕獲設(shè)備和RTSP源的實(shí)驗(yàn),下面這篇文章主要給大家介紹了關(guān)于如何使用VUE和webrtc-streamer實(shí)現(xiàn)實(shí)時(shí)視頻播放(監(jiān)控設(shè)備-rtsp)的相關(guān)資料,需要的朋友可以參考下2022-11-11Vue項(xiàng)目?jī)?yōu)化打包之前端必備加分項(xiàng)
相信現(xiàn)在很多人都是用Vue做過(guò)了各種項(xiàng)目,但是項(xiàng)目代碼做完和上線(xiàn)并不代表這結(jié)束,還有上線(xiàn)以后的優(yōu)化也是很重要的一點(diǎn),這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目?jī)?yōu)化打包的相關(guān)資料,需要的朋友可以參考下2021-09-09axios向后臺(tái)傳遞數(shù)組作為參數(shù)的方法
今天小編就為大家分享一篇axios向后臺(tái)傳遞數(shù)組作為參數(shù)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08解決electron打包vue-element-admin項(xiàng)目頁(yè)面無(wú)法跳轉(zhuǎn)的問(wèn)題小結(jié)
這篇文章主要介紹了解決electron打包vue-element-admin項(xiàng)目頁(yè)面無(wú)法跳轉(zhuǎn)的問(wèn)題小結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03