在正式场景中我们经常遇到一个问题,就是登出页面或其他操作的时候,我们需要重置所有的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,使其不被更新。
当然我们也可以传入值来更新相应值,其他所有值不进行更新(这里我们就不详细说明)

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

vuex重置所有state(可定制)相关推荐

  1. vue 父刷新子_父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法...

    场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加 ...

  2. vue 组件属性监听_详解vuex 中的 state 在组件中如何监听

    前言 不知道大家有没有遇到过这样一种情况? vuex中的state会在某一个组建中使用,而这个状态的初始化是通过异步加载完成的.组件在渲染过程中,获取的state状态为空.也就是说组件在异步完成之前就 ...

  3. vuex模块化 怎么引用state_[Vuex系列] - 细说state的几种用法

    state 存放的是一个对象,存放了全部的应用层级的状态,主要是存放我们日常使用的组件之间传递的变量. 我们今天重点讲解下state的几种用法,至于如何从头开始创建Vuex项目,请看我写的第一个文章. ...

  4. vuex直接修改state 与 用dispatch/commit来修改state的差异

    使用 vuex 修改 state 时,有两种方式: 可以直接使用 this.$store.state.变量 = xxx: this.$store.dispatch(actionType, payloa ...

  5. Vuex中的state属性详解

    一.state属性介绍 state属性是Vuex中用于存放组件之间共享的数据:也就是说,我们把一些组件之间共享的状态主要存放在state属性中:它采用的是单一状态树--用一个对象就包含了全部的应用层级 ...

  6. 快速重置vuex数据 - Vue

    首发于: https://lonhon.top 最近遇到的一个场景,由于项目的权限系统+路由控制中用到了vuex存储全局数据,在登出时需要将所有数据进行重置or清空. 比如 store.state.u ...

  7. uniapp中利用监视vuex中state数据配合uview实现登录消息提示

    先看效果图 登录成功或者退出成功都能够给用户提示,提示用户体验! uview的顶部消息提示详情可见u-top-tips 设计思路 首先是页面的布局 是将顶部消息提示写在了个人详情页内 <u-to ...

  8. vuex state使用

    访问vuex中的state值 方式1 <div>{{$store.state.count}}</div> 方式2 <template><div id=&quo ...

  9. vuex刷新state数据丢失问题

    用vuex来做全局的状态管理时, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 1. 产生原因 其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载v ...

最新文章

  1. 中国风力发电设备市场需求容量与投资战略研究报告2022版
  2. 微信小程序把玩(三)tabBar底部导航
  3. 什么是 TCC分布式事务
  4. 关于Servlet中filter过滤器的小问题
  5. PG13用pg_rman进行备份恢复
  6. 系统安装05-Xenserver 7.0安装
  7. matlab 求正交补,机器人动力学(一)空间向量(Spatial Vectors)简介
  8. 一张图看尽 Linux 内核运行原理
  9. Java容器Set接口
  10. 佳博网口打印机驱动安装
  11. 台达EH3系列PLC与温控器的MODBUS RTU通信例程
  12. 计算机无法对光盘格式化,使用驱动器X:中的光盘之前需要将其格式化,是否需要将其格式化?...
  13. 转载作品:人生重开模拟器(修仙7.0版)
  14. java dcm转bmp源码_DCM文件转图像,并高清处理图像
  15. unexpected character `w‘ in type specifier 解决方案
  16. 港科夜闻|全国政协副主席梁振英一行到访香港科技大学(广州)
  17. 基于图像的光照(Image-Based Lighting, IBL)概述
  18. python 费马检测
  19. 【Nodejs】Http模块01
  20. 近年现场比赛补题(From 2013 to 2018)[持续更新]

热门文章

  1. 碳中和背景下中国水泥行业发展预测与投资价值分析报告2022-2028年版
  2. sql server set赋值和select 赋值的区别以及使用方法
  3. python各种模块的使用
  4. python 全栈开发,Day66(web应用,http协议简介,web框架)
  5. I/O流的概念和流类库的结构
  6. xss Payload
  7. 《Linux下sed命令的使用》
  8. 关于迷笛音乐节的重大通知-_-
  9. 如何用SQL分析电商用户行为数据(案例)
  10. PMCAFF问答龙虎榜,大神云集,等你挑战