乐趣区

vuex重置所有state(可定制)

在正式场景中我们经常遇到一个问题,就是登出页面或其他操作的时候,我们需要重置所有的 vuex,让其变为初始状态,那么,就涉及到了多种方法:1、页面刷新:
window.location.reload()
这个方法通过路由判断优化或是逻辑优化,始终页面时重新加载,就会导致用户体验很差,对浏览器来说也是一种不必要的负担,所以我尝试之后就放弃了。
2、写一个重置的方法然后调取
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,使其不被更新。当然我们也可以传入值来更新相应值,其他所有值不进行更新(这里我们就不详细说明)
以上,就是我实践思考出来的方法,可能有不足的地方,欢迎大家提问、交流或提出更好的建议。谢谢

退出移动版