vuex重置全部state(可定製)

在正式場景中咱們常常遇到一個問題，就是登出頁面或其餘操做的時候，咱們須要重置全部的vuex，讓其變爲初始狀態，
那麼，就涉及到了多種方法：
一、頁面刷新：

window.location.reload()

這個方法經過路由判斷優化或是邏輯優化，始終頁面時從新加載，就會致使用戶體驗不好，對瀏覽器來講也是一種沒必要要的負擔，
因此我嘗試以後就放棄了。

二、寫一個重置的方法而後調取

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

store.dispatch('resetVuex')

這樣又會出現多個module，多個state，須要手動添加多個，工做量巨大且不易維護，並且若是咱們state初始是個個數組，一個對象這些更很差操做，更優最多就是咱們初始的時候深拷貝一份，可是也須要每一個module裏進行操做和封裝

這兩種方法是能夠解決問題的，可是我仍是沒有采用這兩種方式，由於感受已經犧牲了某些東西來達成目的了，經過我反覆的實踐，和摸索我採起了如下方法：

首先頁面加載，第一次加載引入store的時候，store的全部state確定是初始值，那麼我就作一個本地緩存記錄下來：
這裏我採用了store插件（引用方式參考 https://github.com/nbubna/store）

在main.js建立vue實例以前：

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

const store = createStore() //我建立好的 vuex庫
_store({ initState: store.state })  //緩存一個名爲initState的初始狀態

咱們知道main.js是頁面載入的時候執行一次的那麼緩存的initState就是本身最開始建立store裏的state狀態
(包含了module裏的全部state)；

而後咱們在store建立的全局寫一個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) { // 驗證傳入的是一個數組
          return
        }
        
        const initState  = _store('initState') // 取出初始值的緩存
        const _initState = payload.length ? _.omit(initState, payload) : initState // 判斷傳入值有無數據，有數據剔除相對應的值
        
        _.extend(state, _initState)
      }
    },
    modules: {
     ...
    }
    }）

這個名叫resetAllState的mutation方法裏就是講全局的state替換成咱們緩存的state。
這裏爲何 payload 是一個數組呢？
由於這就是標題所描述的可定製，若是頁面內重置絕大部分狀態，但須要保留其中一些狀態的時候咱們能夠經過咱們傳遞過來的state值來剔除相應的state，使其不被更新。
固然咱們也能夠傳入值來更新相應值，其餘全部值不進行更新（這裏咱們就不詳細說明）

以上，就是我實踐思考出來的方法，可能有不足的地方，歡迎你們提問、交流或提出更好的建議。謝謝