快捷導(dǎo)航

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

更新時(shí)間：2019年01月17日 11:53:38 作者：unique丶J

在正式場(chǎng)景中我們經(jīng)常遇到一個(gè)問(wèn)題，就是登出頁(yè)面或其他操作的時(shí)候，我們需要重置所有的vuex，讓其變?yōu)槌跏紶顟B(tài)，那么如何重置呢，下面就跟隨小編一起來(lái)了解一下

在正式場(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)、交流或提出更好的建議。也希望大家多多支持腳本之家。

您可能感興趣的文章: