快速重置vuex数据 - Vue

wyk1184 发布于2019-08-22 17:35 / 3625人阅读

摘要：首发于最近遇到的一个场景，由于项目的权限系统路由控制中用到了存储全局数据，在登出时需要将所有数据进行重置清空。刷新后，将赋值为从而显示页面内容。最后，一个简单的方法就完成了的重置。

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

比如 store.state.username初始为"" => 登陆后变成"张三" => 登出后还是"张三"，此时需要置为"".

解决方法0.1

actions.resetVuex = function() {
    store.commit(state.a, null)
    store.commit(state.b, null)
    store.commit(state.c, null)
    ...
}

store.dispatch("resetVuex")

一开始的想法是创建一个action实现vuex重置，在登出时调用该放方法即可。

但是这种方法需要手动维护，而且一个个写上去感觉太low了，随后又想到可以通过遍历store.state进行所有重置，但是这种方法有一个弊端就是如果重置的值有不同的初始值的话，赋值的时候就很麻烦了。

总之，上面的方法和搜索出来的方法都不尽人意，但是迫于无奈就先用着第一种了。

解决方法1.0

就在上述方法写到一半的时候忽然灵光一闪，我特么之前为了store的数据持久化不被页面F5重置还专门把数据放在SessionStorage这些本地存储里，现在一个个去重置感觉像个睿智， 在登出的时候刷新页面就能达到store重置的效果了 。

通过页面重载方法window.location.reload()可以手动刷新页面，下面上完善流程代码:

// 1.登出方法
logout() {
    window.localStorage.clear()
    window.sessionStorage.clear()
    clearCookie()
    this.$router.push({ name: "Login" })
}

// 2.登录页面 / js部分
data() {
  return {
    isReload: false // 默认不显示页面内容
  }
},
created() {
    if (this.$store.getters.addRouters.length > 0) { // 判断是否已经刷新
      return window.location.reload()
    }
    // 正式显示页面内容
    this.isReload = true
}

// 3.登录页面 / template部分

注意，在登录页面的created钩子中，如果直接进行reload方法，会出现页面连续刷新的问题:登录页面加载到一半，内容已经显示的情况下会再次刷新，这种体验肯定要被产品怼差评。

所以此处用到两个方法来解决两次刷新的问题

登录页面中template使用v-if控制显示

根据store是否有数据判断是否重置，如果数据还有值，则reload()，此时因为isReload的默认值为false，所以登录页面在刷新前不会显示任何内容。刷新后，将isRolad赋值为true从而显示页面内容。

最后，一个简单的reload方法就完成了vuex的重置。

云服务器 GPU云服务器 Vue_Vuex Vuex vuex cdn django vue 数据绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95309.html

vuex 闲置状态重置方案

摘要：为了做到页面的极致优化，我们需要将那些闲置的状态重置，以减小占用的内存空间。不如当路由改变时去重置中的所有状态。这里只是提供一种重置状态的一种方案，如果有更好方案还请各位看官留言。前言大型单页应用（后面都是指spa），我们往往会通过使用状态管理器 vuex 去解决组件间状态共享与状态传递等问题。这种应用少则几十个单页，多则上百个单页。随着路由的频繁切换，每个路由对应的 vuex 中...

junfeng777 2019-08-21 18:36 评论0 收藏0
Vuex源码学习（二）脉络梳理

摘要：各位看官没看过功能梳理的可以先阅读下源码学习一功能梳理前车之鉴有了源码学习的经验，每次看认真钻研源代码的时候都会抽出一小段时间来大体浏览一遍源代码。大体了解这个源代码的脉络，每个阶段做了什么，文件目录的划分。各位看官没看过功能梳理的可以先阅读下Vuex源码学习（一）功能梳理. 前车之鉴有了vue-router源码学习的经验，每次看认真钻研源代码的时候都会抽出一小段时间来大体浏览一...

chenjiang3 2019-08-23 16:18 评论0 收藏0
vue vuex vue-rouert后台项目——权限路由（超详细简单版）

摘要：可以配合相关的官方文档学习。上面的内容说的重点，其实也算是项目的全部啦项目地址感觉还不错的话就请给个吧谢谢有什么问题欢迎提问项目地址：vue-simple-template共三个角色：adan barbara carrie 密码全是：123456 adan 拥有最高权限A 他可以看到 red , yellow 和 blue 页面（共三个页面）barbara 拥有权限B 他可以看到...

olle 2019-08-21 18:29 评论0 收藏0
react 与 vue 使用心得

摘要：调用钩子渲染一波，然后把渲染后的元素赋值给并取代。大和小同为渐进式框架，提供了大量的对数据视图去进行处理。微信小程序我选择用原生主要是因为预览还要再开一个很不开心。前言刷了一波 react 文档,想找个东西练练手，在网上一看，什么实现一个网易云、酷狗音乐、豆瓣感觉找接口都够费神了,之前做过 vue 实现饿了么的一个系统，图片资源，mock 数据齐全，再加之样式写过了，所以直接就...

why_rookie 2019-08-22 18:12 评论0 收藏0
vuex重置所有state(可定制)

摘要：这里为什么是一个数组呢因为这就是标题所描述的可定制，如果页面内重置绝大部分状态，但需要保留其中一些状态的时候我们可以通过我们传递过来的值来剔除相应的，使其不被更新。在正式场景中我们经常遇到一个问题，就是登出页面或其他操作的时候，我们需要重置所有的vuex，让其变为初始状态，那么，就涉及到了多种方法：1、页面刷新： window.location.reload() 这个方法通过路由判断...

singerye 2019-08-23 14:47 评论0 收藏0