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，使其不被更新。
当然我们也可以传入值来更新相应值，其他所有值不进行更新（这里我们就不详细说明）
以上就是我实践思考出来的方法，可能有不足的地方，欢迎大家提问、交流或提出更好的建议。也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue.js实现点击左右按钮图片切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了vue中关于el-popover的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
vue3二次封装element-ui中的table组件的过程详解
这篇文章主要给大家介绍了vue3二次封装element-ui中的table组件的过程,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友跟着小编一起来学习吧2024-01-01
本文主要介绍了Avue和Element-UI动态三级表头的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了使用Vue写一个datepicker的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了Vue3中的三种函数，分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍，有需要的朋友可以借鉴参考下2021-09-09
在当前的互联网时代,前后端分离架构已经成为构建应用系统的主流方式,本文将详细介绍如何利用 SpringBoot 与 Vue3 构建一个前后端分离的项目,感兴趣的小伙伴可以了解下2025-04-04
这篇文章主要为大家详细介绍了vue实现百分比占比条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
vue的ui组件库很多种，但是这么多的组件库也不能满足我们的开发需求，所以需要我们根据自己需求自己写一个插件，下文小编通过两个栗子给大家介绍js自定义组件的方法，感兴趣的朋友一起看看吧2018-03-03
这篇文章主要介绍了Element Dropdown下拉菜单的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
最新评论