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


Posted in Javascript onJanuary 17, 2019

在正式场景中我们经常遇到一个问题,就是登出页面或其他操作的时候,我们需要重置所有的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,使其不被更新。

当然我们也可以传入值来更新相应值,其他所有值不进行更新(这里我们就不详细说明)

以上就是我实践思考出来的方法,可能有不足的地方,欢迎大家提问、交流或提出更好的建议。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
bootstrap table实例详解
Jan 06 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
node app 打包工具pkg的具体使用
Jan 17 #Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 #Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 #Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 #Javascript
vue权限管理系统的实现代码
Jan 17 #Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 #Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 #Javascript
You might like
一个PHP日历程序
2006/12/06 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
php intval函数用法总结
2019/04/14 PHP
php写app用的框架整理
2019/09/29 PHP
一段多浏览器的"复制到剪贴板"javascript代码
2007/03/27 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
详解Nodejs之静态资源处理
2017/06/05 NodeJs
简单的网页广告特效实例
2017/08/19 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python unittest模块用法实例分析
2018/05/25 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
Django logging配置及使用详解
2019/07/23 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
建筑工程实习自我鉴定
2013/09/19 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
内科护士节演讲稿
2014/09/11 职场文书
2015年电工工作总结
2015/04/10 职场文书
教师工作证明范本
2015/06/12 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers