重置vuex所有state的状态

最新推荐文章于 2023-11-10 14:18:38 发布
VIP文章 最新推荐文章于 2023-11-10 14:18:38 发布
阅读量1.8k 收藏 4
点赞数 1
分类专栏： 前端常用开发记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39168678/article/details/109574646
版权

效果
在这里插入图片描述

思路
主要是在store首次生成state后深拷贝出一份备份，然后在reset方法中将各个属性还原回去，注意最重要的是不要破坏原来数据的结构 我之前还看到有人用delete，数据属性都没了肯定是会报错的

步骤1准备一个深拷贝方法

 // 定义一个深拷贝函数  接收目标target参数
  deepClone(target) {
   
    // 定义一个变量
    let result
    // 如果当前需要深拷贝的是一个对象的话
    if (typeof target === 'object') {
   
      // 如果是一个数组的话
      if (Array.isArray(target)
最低0.47元/天 解锁文章
白马湖小龙王
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vuex提交state&&实时监听state数据的改变方法
12-08
项目背景 websocket长连接 根据指示进行四个页面之间的跳转，在各页面执行相应的逻辑处理。 项目搭建结构如下所示： 解决方案 在四个页面外面写个父页面，router路径如下所示： vuex \src\store\mutations.js //存储到vuex里面 [WEBSOCKETDATA](state,socketdata){ state.socketData=null;//vue监听不到数组的改变 所以清空重置一下就好咯 state.socketData=socketdata } \src\store\getters.js export default { gett
浅谈vuex 闲置状态重置方案
08-28
本篇文章主要介绍了vuex 闲置状态重置方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vuex如何重置所有state(可定制)
10-17
在正式场景中我们经常遇到一个问题，就是登出页面或其他操作的时候，我们需要重置所有的vuex，让其变为初始状态，那么如何重置呢，下面就跟随小编一起来了解一下
vuex重置所有state
前端小99的博客
11-23 2462
在正式场景中我们经常遇到一个问题，就是登出页面或其他操作的时候，我们需要重置所有的vuex，让其变为初始状态， 那么，就涉及到了多种方法： 1、页面刷新： window.location.reload() 这个方法通过路由判断优化或是逻辑优化，始终页面时重新加载，就会导致用户体验很差，对浏览器来说也是一种不必要的负担， 所以我尝试之后就放弃了。 2、写一个重置的方法然后调取 actions.resetVuex = function() { store.commit(stat..
Vuex中state（状态）、mutations（更改状态） actions（异步操作）、getters(计算属性)、modules(模块)使用详解！
Cxil的博客
12-27 4576
如何使用actions 修改异步操作呢？已经定义好的方法1.直接通过 this.$store.dispatch('方法名') 来调用 可以传参2.通过辅助函数 导入 然后...map 映射方法名...mapActions(['方法名'])
重置Vuex本地存储状态
m0_51431448的博客
01-19 3616
思路： 在初始化的时候，也就是store的初始状态，把state中的所有状态都拷贝出以一份（这里一定是深拷贝），然后在需要重置状态的时候，再将其还原回去（这里也一定是深拷贝方式） 一：初始化的时候向window挂载属性，并将全部最初的状态拷贝一份 main.js import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; import
vuex——重置vuex数据
最新发布
朝阳39的博客
11-10 619
登出系统时，需将 vuex 中存储的数据，恢复为最初的默认状态。
刷新后，store中数据丢失处理
weixin_43422861的博客
08-07 3101
//在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store")))) } //在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventLi.
vuex全局状态管理工具（适用vue2）
2301_76357103的博客
06-14 513
组件间通信有许多方法，可参考《Vue组件间传值》，但是当组件越来越多，组件相关性不大时，通信就比较复杂而且乱。vuex就是组件间的通信共享仓库。Vuex 是 vue 项目中实现大范围数据共享的技术方案。简单理解：把需要多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的 Vue 实例中，让其他组件可以使用，共享这个对象中的所有变量属性，并且是响应式的。在说集中式管理模式之前，我们可以先来想想常见的处理方式是怎样的，即每个组件维护自身的数据和状态，自给自足，分而治之；
vuex-extensions:将Vuex重置为初始状态并支持gettersmutationsaction mixins
05-12
Vuex的重置功能和Mixins选项Vuex扩展向Vuex添加Reset和Mixins功能资源中：将中：安装您可以通过NPM安装它 npm install vuex-extensions 或YARN yarn add vuex-extensions用法在上查看示例。创建Vuex.Store import ...
vue.js中vuex状态管理的实现与模块化
Fane的博客
04-09 1299
本文采用的前端组件为ElementUI，所以需要在使用vuecli搭建前端工程，后继续安装npm install element-ui，并在main.js中引入 main.js代码： import Element from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI) 新建存储...
一步一步实现中后台管理平台模板-11-Vuex模块化最佳实践及状态持久化
BraveWangDev
08-23 1044
本篇将使用Vuex对vue-framework-admin项目做状态管理 1,为什么需要状态管理 2,Vuex的运行机制 3,Vuex的配置和使用 4,Vuex的模块化最佳实践 5,Vuex的持久化 6,代码下载
在Vue3+TS的项目中使用Vuex模块化管理状态
m0_46444000的博客
05-13 1051
VueX模块化管理-直接上手 创建/store/index.ts // 创建状态管理 import { createStore } from "vuex"; //配置模块化管理 import loginModule from './login/login' // 根节点状态属性 interface IRootState { name: string age: number } // 必须传入此泛型 const store = createStore<IRootState>({
vuex刷新重置
weixin_66892551的博客
05-11 155
使用vuex-persistedstate将vuex储存在sessionStorage重。
vuex 如何重置state
zhaofeiweb的博客
11-28 3834
const state = {} var copyState = deepClone(state) // 拷贝state对象 function deepClone (obj) { var newObj = obj instanceof Array ? [] : {} for (var i in obj) { newObj[i] = typeof obj[i] === 'objec...
快速重置vuex的state
a961011576的博客
03-23 1056
let initState={ hasLogin: false, userInfo: {}, websock: undefined, /*消息通知*/ message:[], /*即时通讯*/ im:[], } let cloneDeep =(data)=>{//深度copy一份数据 return JSON.parse(JSON.stringify(dat...
vuex重置所有state(可定制)
weixin_30467087的博客
01-17 458
在正式场景中我们经常遇到一个问题，就是登出页面或其他操作的时候，我们需要重置所有的vuex，让其变为初始状态，那么，就涉及到了多种方法：1、页面刷新： window.location.reload() 这个方法通过路由判断优化或是逻辑优化，始终页面时重新加载，就会导致用户体验很差，对浏览器来说也是一种不必要的负担，所以我尝试之后就放弃了。 2、写一个重置的方法然后调取 actions.rese...
state重置 vuex_vuex重置一切state(可定制)
weixin_28913019的博客
01-17 347
在正式场景中我们常常碰到一个题目，就是登出页面或其他操纵的时刻，我们须要重置一切的vuex，让其变成初始状况，那末，就触及到了多种要领：1、页面革新：window.location.reload()这个要领经由过程路由推断优化或是逻辑优化，一直页面时从新加载，就会致使用户体验很差，对浏览器来讲也是一种不必要的累赘，所以我尝试以后就摒弃了。2、写一个重置的要领然后调取actions.resetVue...
vuex重置所有状态
05-29
你可以在 Vuex 的 mutations 中编写一个名为 resetState 的 mutation，然后在这个 mutation 中重置所有的状态。具体操作如下： ```javascript const mutations = { resetState(state) { Object.assign(state, ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值