欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vuex如何重置所有state(可定制)

 更新時間:2019年01月17日 11:53:38   作者:unique丶J  
在正式場景中我們經(jīng)常遇到一個問題,就是登出頁面或其他操作的時候,我們需要重置所有的vuex,讓其變?yōu)槌跏紶顟B(tài),那么如何重置呢,下面就跟隨小編一起來了解一下

在正式場景中我們經(jīng)常遇到一個問題,就是登出頁面或其他操作的時候,我們需要重置所有的vuex,讓其變?yōu)槌跏紶顟B(tài),
那么,就涉及到了多種方法:

1、頁面刷新:

window.location.reload()

這個方法通過路由判斷優(yōu)化或是邏輯優(yōu)化,始終頁面時重新加載,就會導(dǎo)致用戶體驗很差,對瀏覽器來說也是一種不必要的負擔(dān),所以我嘗試之后就放棄了。

2、寫一個重置的方法然后調(diào)取

actions.resetVuex = function() {
  store.commit(state.a, null)
  store.commit(state.b, null)
  store.commit(state.c, null)
  ...
}

store.dispatch('resetVuex')

這樣又會出現(xiàn)多個module,多個state,需要手動添加多個,工作量巨大且不易維護,而且如果我們state初始是個個數(shù)組,一個對象這些更不好操作,更優(yōu)最多就是我們初始的時候深拷貝一份,但是也需要每個module里進行操作和封裝

這兩種方法是可以解決問題的,但是我還是沒有采用這兩種方式,因為感覺已經(jīng)犧牲了某些東西來達成目的了,通過我反復(fù)的實踐,和摸索我采取了以下方法:

首先頁面加載,第一次加載引入store的時候,store的所有state肯定是初始值,那么我就做一個本地緩存記錄下來:
這里我采用了store插件(引用方式參考 https://github.com/nbubna/store

在main.js創(chuàng)建vue實例之前:

import _store from 'store'
import createStore from './store'
...

const store = createStore() //我創(chuàng)建好的 vuex庫
_store({ initState: store.state }) //緩存一個名為initState的初始狀態(tài)

我們知道m(xù)ain.js是頁面載入的時候執(zhí)行一次的那么緩存的initState就是自己最開始創(chuàng)建store里的state狀態(tài)
(包含了module里的所有state);

然后我們在store創(chuàng)建的全局寫一個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) { // 驗證傳入的是一個數(shù)組
     return
    }
    
    const initState = _store('initState') // 取出初始值的緩存
    const _initState = payload.length ? _.omit(initState, payload) : initState // 判斷傳入值有無數(shù)據(jù),有數(shù)據(jù)剔除相對應(yīng)的值
    
    _.extend(state, _initState)
   }
  },
  modules: {
   ...
  }
  })

這個名叫resetAllState的mutation方法里就是講全局的state替換成我們緩存的state。

這里為什么 payload 是一個數(shù)組呢?

因為這就是標(biāo)題所描述的可定制,如果頁面內(nèi)重置絕大部分狀態(tài),但需要保留其中一些狀態(tài)的時候我們可以通過我們傳遞過來的state值來剔除相應(yīng)的state,使其不被更新。

當(dāng)然我們也可以傳入值來更新相應(yīng)值,其他所有值不進行更新(這里我們就不詳細說明)

以上就是我實踐思考出來的方法,可能有不足的地方,歡迎大家提問、交流或提出更好的建議。也希望大家多多支持腳本之家。

相關(guān)文章

  • 在小程序/mpvue中使用flyio發(fā)起網(wǎng)絡(luò)請求的方法

    在小程序/mpvue中使用flyio發(fā)起網(wǎng)絡(luò)請求的方法

    這篇文章主要介紹了在小程序/mpvue中使用flyio發(fā)起網(wǎng)絡(luò)請求的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • 使用VUE和webrtc-streamer實現(xiàn)實時視頻播放(監(jiān)控設(shè)備-rtsp)

    使用VUE和webrtc-streamer實現(xiàn)實時視頻播放(監(jiān)控設(shè)備-rtsp)

    WebRTC-streamer是一項使用簡單機制通過WebRTC流式傳輸視頻捕獲設(shè)備和RTSP源的實驗,下面這篇文章主要給大家介紹了關(guān)于如何使用VUE和webrtc-streamer實現(xiàn)實時視頻播放(監(jiān)控設(shè)備-rtsp)的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • Vue項目優(yōu)化打包之前端必備加分項

    Vue項目優(yōu)化打包之前端必備加分項

    相信現(xiàn)在很多人都是用Vue做過了各種項目,但是項目代碼做完和上線并不代表這結(jié)束,還有上線以后的優(yōu)化也是很重要的一點,這篇文章主要給大家介紹了關(guān)于Vue項目優(yōu)化打包的相關(guān)資料,需要的朋友可以參考下
    2021-09-09
  • Vue?Router如何刷新當(dāng)前頁面

    Vue?Router如何刷新當(dāng)前頁面

    Vue項目,?在實際工作中,?有些時候需要在?加載完某些數(shù)據(jù)之后對當(dāng)前頁面進行刷新,?這篇文章主要為大家介紹了三種常用方法,需要的可以參考一下
    2023-10-10
  • axios向后臺傳遞數(shù)組作為參數(shù)的方法

    axios向后臺傳遞數(shù)組作為參數(shù)的方法

    今天小編就為大家分享一篇axios向后臺傳遞數(shù)組作為參數(shù)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • vue使用keep-alive后清除緩存的方法

    vue使用keep-alive后清除緩存的方法

    這篇文章主要給大家介紹了關(guān)于vue使用keep-alive后清除緩存的相關(guān)資料,這個問題在我們?nèi)粘9ぷ髦薪?jīng)常會用到,本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2021-08-08
  • vue中forEach循環(huán)的使用講解

    vue中forEach循環(huán)的使用講解

    這篇文章主要介紹了vue中forEach循環(huán)的使用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • vue 如何使用vue-cropper裁剪圖片你知道嗎

    vue 如何使用vue-cropper裁剪圖片你知道嗎

    這篇文章主要為大家介紹了vue 使用vue-cropper裁剪圖片,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • 解決electron打包vue-element-admin項目頁面無法跳轉(zhuǎn)的問題小結(jié)

    解決electron打包vue-element-admin項目頁面無法跳轉(zhuǎn)的問題小結(jié)

    這篇文章主要介紹了解決electron打包vue-element-admin項目頁面無法跳轉(zhuǎn)的問題小結(jié),本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-03-03
  • 如何在Vue.JS中使用圖標(biāo)組件

    如何在Vue.JS中使用圖標(biāo)組件

    這篇文章主要介紹了如何在Vue.JS中使用圖標(biāo)組件,文中講解非常細致,代碼幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下
    2020-08-08

最新評論