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，使其不被更新。
固然咱们也能够传入值来更新相应值，其余全部值不进行更新（这里咱们就不详细说明）

以上，就是我实践思考出来的方法，可能有不足的地方，欢迎你们提问、交流或提出更好的建议。谢谢