vue项目退出登录清除store数据的三种方法

目录
  • 方法一：（不友好，页面会白屏，不推荐使用）
  • 方法二 : (不会出现白屏,推荐使用)
  • 方法三 : vuex清除token (不会出现白屏,推荐使用)
  • 总结

方法一：（不友好，页面会白屏，不推荐使用）

在退出登录的loginOut 方法里面:

window.location.reload()

方法二 : (不会出现白屏,推荐使用)

利用v-if控制router-view，在根组件APP.vue中实现一个刷新方法

<template>
    <router-view v-if="isRouterAlive"/>     //路由的组件
</template>
<script>
export default {
 data () {
   return {
     isRouterAlive: true
   }
 },
 methods: {
   reload () {
     this.isRouterAlive = false
     this.$nextTick(() => (this.isRouterAlive = true))
   }
 }
}
</script>

然后使用的时候调用： this.reload() 方法

方法三 : vuex清除token (不会出现白屏,推荐使用)

vuex清除token

由于项目中需要一个用户登出的功能，而数据放在Vuex中在登出没有刷新时数据并不会更新

所以找到了这样一个很不错的方法

将state以各种方式保存

注册时调用函数赋值

清空时再将保存的state赋值替换当前的state

over

1. 首先默认state时要用新的方法注册

把数据写在函数的返回值中（其他方法也可以只要能调用）

const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: '',
    permList:[]
  }
}

 2. 给Vuex中的state赋值并注册

const state = getDefaultState();

const store = new Vuex.Store({
  modules: {
    app,
    settings,
    state,
    permissions
  },
  getters
})

 3. 在mutations中定义方法

  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState())
  },

 4. 页面中使用

    commit('RESET_STATE');

5. 全部完整代码如下：

const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: ''
  }
}

const state = getDefaultState()

const mutations = {
  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState())
  },
}

 logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        removeToken() // must remove  token  first
        resetRouter()
        commit('RESET_STATE')
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

6. 退出登录

组件中派发任务

    async logout() {
      await this.$store.dispatch("user/logout");
      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
    },
  },

亲自测试有效：

第三种方法强烈推荐使用。

总结

到此这篇关于vue项目退出登录清除store数据的三种方法的文章就介绍到这了,更多相关vue退出登录清除store数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue退出登录时清空缓存的实现

    如下所示: <template> <div id="main" class="app-main"> <router-view></router-view> </div> </template> <script> export default { data () { return { theme: this.$store.state.app.themeColor }; }, mount

  • vue实现用户长时间不操作自动退出登录功能的实现代码

    一.需求说明 昨天后端开发人员让我实现一个网页锁屏,当时我一头雾水,问他为啥搞的跟安卓系统一样.他的回复是"看起来帅点". 首先我们梳理下逻辑,先来个简化版的,用户长时间未操作时,返回登录页 二.思路 使用 mouseover 事件来监测是否有用户操作页面,写一个定时器间隔特定时间检测是否长时间未操作页面,如果是,退出登陆,清除token,返回登录页 三.实现 [1]在util文件夹下创建一个storage.js封装localStorage方法 export default { set

  • vue关闭浏览器退出登录的实现示例

    vue关闭浏览器退出登录的实现示例

    目录 1.beforeunload事件 2.unload事件 3.源码部分   项目需要:也在网上找了不少类似的文章,不过用起来多少有点问题,毕竟要适合自己的需求,我这里是vue3适用,理论上vue2也可以使用,我写的方法是通用的.   这些方法无非都是根据beforeunload和unload这两个事件执行的.   下面我搜了下菜鸟教程和MDN对两个事件的介绍,可自行琢磨. 1.beforeunload事件 1.1.菜鸟教程: 1.2.MDN 2.unload事件 2.1.菜鸟教程 2.2.M

  • vue项目退出登录清除store数据的三种方法

    vue项目退出登录清除store数据的三种方法

    目录 方法一:(不友好,页面会白屏,不推荐使用) 方法二 : (不会出现白屏,推荐使用) 方法三 : vuex清除token (不会出现白屏,推荐使用) 总结 方法一:(不友好,页面会白屏,不推荐使用) 在退出登录的loginOut 方法里面: window.location.reload() 方法二 : (不会出现白屏,推荐使用) 利用v-if控制router-view,在根组件APP.vue中实现一个刷新方法 <template> <router-view v-if="is

  • JavaScript中解析JSON数据的三种方法

    概述 现在JSON格式在web开发中越来越受重视,特别是在使用ajax开发项目的过程中,经常需要将json格式的字符串返回到前端,前端解析成JS对象(JSON ). ECMA-262(E3)中没有将JSON概念写到标准中,还好在 ECMA-262(E5)中JSON的概念被正式引入了,包括全局的JSON对象和Date的toJSON方法. 解析JSON数据的三种方法 eval()方法 解析JSON数据的最常用方法是使用javascript的eval()方法,代码如下: 复制代码 代码如下: func

  • Vue父子模版传值及组件传值的三种方法

    这里是针对于vue1.0,如果要学2.0,建议大家去看官方文档 vue2.0 http://vuefe.cn/guide/ vue-router2.0https://router.vuejs.org/zh-cn/essentials/getting-started.html 第一种 <div id="example"> <my-component></my-component> </div> <script src="..

  • Python 中导入csv数据的三种方法

    Python 中导入csv数据的三种方法,具体内容如下所示: 1.通过标准的Python库导入CSV文件: Python提供了一个标准的类库CSV文件.这个类库中的reader()函数用来导入CSV文件.当CSV文件被读入后,可以利用这些数据生成一个NumPy数组,用来训练算法模型.: from csv importreader import numpy as np filename=input("请输入文件名: ") withopen(filename,'rt',encoding='

  • MyBatis批量插入数据的三种方法实例

    MyBatis批量插入数据的三种方法实例

    目录 前言 准备工作 1.循环单次插入 2.MP 批量插入 ① 控制器实现 ② 业务逻辑层实现 ③ 数据持久层实现 MP 性能测试 MP 源码分析 3.原生批量插入 ① 业务逻辑层扩展 ② 数据持久层扩展 ③ 添加 UserMapper.xml 原生批量插入性能测试 缺点分析 解决方案 总结 前言 批量插入功能是我们日常工作中比较常见的业务功能之一,之前我也写过一篇关于<MyBatis Plus 批量数据插入功能,yyds!>的文章,但评论区的反馈不是很好,主要有两个问题:第一,对 MyBat

  • php获取POST数据的三种方法实例详解

    php获取POST数据的三种方法 方法一,$_POST $_POST或$_REQUEST存放的是PHP以key=>value的形式格式化以后的数据. 方法二,使用file_get_contents("php://input") 对于未指定 Content-Type 的POST数据,则可以使用file_get_contents("php://input");来获取原始数据. 事实上,用PHP接收POST的任何数据均使用本方法.而不用考虑Content-Type,

  • jQuery使用JSONP实现跨域获取数据的三种方法详解

    本文实例讲述了jQuery使用JSONP实现跨域获取数据的三种方法.分享给大家供大家参考,具体如下: 第一种方法是在ajax函数中设置dataType为'jsonp' $.ajax({ dataType: 'jsonp', url: 'http://www.a.com/user?id=123', success: function(data){ //处理data数据 } }); 第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可 $.getJSON('http:/

  • 防止MySQL重复插入数据的三种方法

    新建表格 CREATE TABLE `person` ( `id` int NOT NULL COMMENT '主键', `name` varchar(64) CHARACTER SET utf8 COLLATE utf8_bin NULL DEFAULT NULL COMMENT '姓名', `age` int NULL DEFAULT NULL COMMENT '年龄', `address` varchar(512) CHARACTER SET utf8 COLLATE utf8_bin N

  • C#去除DataTable重复数据的三种方法

    业务需求 最近做一个把源数据库的数据批次导出到目标数据库.源数据库是采集程序采集而来的原始数据库,所以需要对其进行一些处理(过滤一些为空,长度太短或太长,非法字符,重复数据)然后在进行入库. 其中要避免目标库插入重复数据.这重复数据可能是源数据库本身就有重复数据,还有就是已经插入避免重复插入. 过滤自身重复数据解决方案 第一种:采用DataView.ToTable()方法 DataView.ToTable 方法 .NET Framework 2.0 其根据现有 DataView中的行,创建并返回

  • python网络编程调用recv函数完整接收数据的三种方法

    最近在使用python进行网络编程开发一个通用的tcpclient测试小工具.在使用socket进行网络编程中,如何判定对端发送一条报文是否接收完成,是进行socket网络开发必须要考虑的一个问题.这里,简要介绍一下判别数据接收接收完成常用的三种方法: 1.基础数据接收法: 使用基础数据接收法时,当与服务socket断开连接时,会接收到空字符串.因此,可以根据此特点,在程序中加入循环,一直接收数据,直到数据发送端关闭socket连接.适用场景:客户端和服务器的链接为短链接(即一次socket通讯

随机推荐