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,使其不被更新。
当然我们也可以传入值来更新相应值,其他所有值不进行更新(这里我们就不详细说明)
以上,就是我实践思考出来的方法,可能有不足的地方,欢迎大家提问、交流或提出更好的建议。谢谢
vuex重置所有state(可定制)相关推荐
- vue 父刷新子_父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法...
场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加 ...
- vue 组件属性监听_详解vuex 中的 state 在组件中如何监听
前言 不知道大家有没有遇到过这样一种情况? vuex中的state会在某一个组建中使用,而这个状态的初始化是通过异步加载完成的.组件在渲染过程中,获取的state状态为空.也就是说组件在异步完成之前就 ...
- vuex模块化 怎么引用state_[Vuex系列] - 细说state的几种用法
state 存放的是一个对象,存放了全部的应用层级的状态,主要是存放我们日常使用的组件之间传递的变量. 我们今天重点讲解下state的几种用法,至于如何从头开始创建Vuex项目,请看我写的第一个文章. ...
- vuex直接修改state 与 用dispatch/commit来修改state的差异
使用 vuex 修改 state 时,有两种方式: 可以直接使用 this.$store.state.变量 = xxx: this.$store.dispatch(actionType, payloa ...
- Vuex中的state属性详解
一.state属性介绍 state属性是Vuex中用于存放组件之间共享的数据:也就是说,我们把一些组件之间共享的状态主要存放在state属性中:它采用的是单一状态树--用一个对象就包含了全部的应用层级 ...
- 快速重置vuex数据 - Vue
首发于: https://lonhon.top 最近遇到的一个场景,由于项目的权限系统+路由控制中用到了vuex存储全局数据,在登出时需要将所有数据进行重置or清空. 比如 store.state.u ...
- uniapp中利用监视vuex中state数据配合uview实现登录消息提示
先看效果图 登录成功或者退出成功都能够给用户提示,提示用户体验! uview的顶部消息提示详情可见u-top-tips 设计思路 首先是页面的布局 是将顶部消息提示写在了个人详情页内 <u-to ...
- vuex state使用
访问vuex中的state值 方式1 <div>{{$store.state.count}}</div> 方式2 <template><div id=&quo ...
- vuex刷新state数据丢失问题
用vuex来做全局的状态管理时, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 1. 产生原因 其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载v ...
最新文章
- 中国风力发电设备市场需求容量与投资战略研究报告2022版
- 微信小程序把玩(三)tabBar底部导航
- 什么是 TCC分布式事务
- 关于Servlet中filter过滤器的小问题
- PG13用pg_rman进行备份恢复
- 系统安装05-Xenserver 7.0安装
- matlab 求正交补,机器人动力学(一)空间向量(Spatial Vectors)简介
- 一张图看尽 Linux 内核运行原理
- Java容器Set接口
- 佳博网口打印机驱动安装
- 台达EH3系列PLC与温控器的MODBUS RTU通信例程
- 计算机无法对光盘格式化,使用驱动器X:中的光盘之前需要将其格式化,是否需要将其格式化?...
- 转载作品:人生重开模拟器(修仙7.0版)
- java dcm转bmp源码_DCM文件转图像,并高清处理图像
- unexpected character `w‘ in type specifier 解决方案
- 港科夜闻|全国政协副主席梁振英一行到访香港科技大学(广州)
- 基于图像的光照(Image-Based Lighting, IBL)概述
- python 费马检测
- 【Nodejs】Http模块01
- 近年现场比赛补题(From 2013 to 2018)[持续更新]