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最常用与实用的创建类的代码
Aug 12 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
js图片无缝滚动插件使用详解
May 26 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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
php防攻击代码升级版
2010/12/29 PHP
PHP数组交集的优化代码分析
2011/03/06 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
Python制作CSDN免积分下载器
2015/03/10 Python
Python 爬虫图片简单实现
2017/06/01 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
解析python实现Lasso回归
2019/09/11 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
世界最大的票务市场:viagogo
2017/02/16 全球购物
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
党员批评与自我批评
2014/02/12 职场文书
授权委托书
2014/07/31 职场文书
妇产科护理心得体会
2016/01/22 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers