文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何解决刷新页面vuex数据不消失和不跳转页面的问题

2024-04-02 19:55

关注

小编给大家分享一下如何解决刷新页面vuex数据不消失和不跳转页面的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

先说点什么

vuex和路由拦截这一块捣鼓的有一段时间了,总算是爬出来了,特地来分享一下,首先声明没有什么基础介绍,用的是登录状态存储sessionStorage的方法!!!

进入正题

刷新

刷新相当与重启项目,之前获取到的数据也只是通过store暂存起来,项目关闭时就不见了,这有些像电脑重启,存储在RAM的数据会消失。但是储存在sessionstorage、localstorage和cookie里的内容不会消失.

Vuex

方法思路

首先得熟悉vuex,官网中介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,也就是说vuex中的store中的数据都是临时的,都是一些变量,页面刷新重新加载,所有都清空,并且已经在页面中没有进行二次登陆,vuex中就一直是空的,所以就分生出了几个方法

1.因为sessionstorage(关闭页面会消失)、localstorage和cookie刷新页面数据不会消失,所以可以把所有请求到的数据都储存在里边,用的时候再取

2.使用vuex插件

3.登录的时候把token和登录状态(自定义的)赋值给sessionstorage,当刷新页面的时候(路由跳转)从 sessionstorage中获取token和登录状态赋值给store,就会自己重新请求相关页面的数据

我思考过后我选择了方法3,只不过这个方法要和路由拦截结合起来,后面路由完事一起贴代码

代码

index

如何解决刷新页面vuex数据不消失和不跳转页面的问题

actions

// 登录
 Login({ commit, state }, userInfo) {
  return new Promise((resolve, reject) => {
   login(userInfo).then(response => {
    let token = response.data.token;
    commit('SET_TOKEN', token);
    sessionStorage.setItem('token', token);  //获取到新的token的时候赋值给sessionStorage

    commit('SET_ISLOGIN', true);  // 登录成功修改store中的登录状态
    resolve()
   }).catch(error => {
    reject(error)
   })
  })
 },

路由

简单介绍: 路由拦截就相当于路由的'生命周期',在路由的不同时间段插入一个方法,可以在此时间段想要做什么事情,本次只在路由跳转前搞事情,所以只使用router.beforeEach((to, from, next) => { // ... })即可,具体内容官网都很详细

main.js

router.beforeEach((to, from, next) => {
 let isLogin = sessionStorage.getItem('isLogin');
 let token = sessionStorage.getItem('token');
 let id = sessionStorage.getItem('id');
 if (to.meta.requireAuth) {  // 判断是否有权限
  if (!store.state.isLogin && !isLogin && to.path !== '/login') {  // store和sessionStorage中登录状态都为false并且跳转到 不是登录的页面时 都强行跳转到登录页面  
   next({
    path: '/login',
   });
  } else if (!isLogin && to.path !== '/login') {  // 已经在登录页面进入首页的时候
   sessionStorage.setItem('isLogin', store.state.isLogin);
   next();
  } else if (isLogin && to.path !== '/login') {  // 登录进入后刷新页面时
   store.commit('SET_TOKEN', token);
   store.commit('SET_ISLOGIN', isLogin);
   store.commit('SET_ID', id);
   next();
  } else {
   next();
  }
 }
 else {
  next();
 }
});


1.路由拦截我是写在main.js文件中的,要注意 一定要写在vue挂载的上面(new Vue)
2.当点击登录的时候 actions中的登录方法要早于路由拦截
3.退出的登录的时候 不要忘记把sessionStorage里的变量删除

以上是“如何解决刷新页面vuex数据不消失和不跳转页面的问题”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯