刷新页面vuex数据不消失和不跳转页面

tracymac7 发布于2019-08-26 11:32 / 2977人阅读

摘要：先说点什么和路由拦截这一块捣鼓的有一段时间了总算是爬出来了特地来分享一下首先声明没有什么基础介绍用的是登录状态存储的方法进入正题刷新刷新相当与重启项目，之前获取到的数据也只是通过暂存起来，项目关闭时就不见了，这有些像电脑重启，存储在的数据会

先说点什么

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

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里的变量删除

最后再说点什么

希望本文可以给你提供一些帮助,这是我最高兴的,觉得我有写的不对或者有问题的地方也请帮我指正出来,大家互相帮助互相进步!!!

超融合服务器私有云页面不跳转注册页面不跳转 jsp不跳转页面跳转 js刷新页面数据

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

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

Form 提交表单页面刷新不跳转

摘要：提交提交数据，但页面不跳转，可以使用简单方法提交表单页面不跳转提交页面返回的数据显示在中注意中的一定是你要指定要显示返回结果的标签中的属性注意可以放到中的任何位置特别注意可以放到中 1.提交form,action 提交数据，但页面不跳转，可以使用Iframe简单方法 Form提交表单页面不跳转

testHs 2019-08-01 14:37 评论0 收藏0
Form 提交表单页面刷新不跳转

摘要：提交提交数据，但页面不跳转，可以使用简单方法提交表单页面不跳转提交页面返回的数据显示在中注意中的一定是你要指定要显示返回结果的标签中的属性注意可以放到中的任何位置特别注意可以放到中 1.提交form,action 提交数据，但页面不跳转，可以使用Iframe简单方法 Form提交表单页面不跳转

Darkgel 2019-06-27 10:38 评论0 收藏0
如何实现vue中不跳转不闪动页面刷新？provide /inject 完美解决方案

摘要：在的项目中刷新功能你会怎么写我之前一直用这个方法用户体验很不好，因为页面会闪动一下刷新直到我发现了这个方法不过这个方法貌似有兼容问题，首先要确定一下你的版本，此方法适用原理此方法使用的是来控制的显示或隐藏，从变为时，会重新渲染区域，在vue的项目中刷新功能你会怎么写？我之前一直用this.$router.go(0)这个方法用户体验很不好，因为页面会闪动一下刷新直到我发现了这个方法 p...

Lavender 2019-08-23 16:56 评论0 收藏0
如何实现vue中不跳转不闪动页面刷新？provide /inject 完美解决方案

摘要：在的项目中刷新功能你会怎么写我之前一直用这个方法用户体验很不好，因为页面会闪动一下刷新直到我发现了这个方法不过这个方法貌似有兼容问题，首先要确定一下你的版本，此方法适用原理此方法使用的是来控制的显示或隐藏，从变为时，会重新渲染区域，在vue的项目中刷新功能你会怎么写？我之前一直用this.$router.go(0)这个方法用户体验很不好，因为页面会闪动一下刷新直到我发现了这个方法 p...

Luosunce 2019-08-05 16:43 评论0 收藏0
Form表单和Iframe实现文件上传,页面不跳转

摘要：文件上传在不借助第三方的插件的情况下进行文件上传可利用表单对象表单是不存在浏览器的兼容性的，同时在被禁用的情况下也能进行文件的传输，因此可以大胆使用。使用表单提交文件一个非常典型的应用场景就是上传图片，但是页面不刷新。文件上传在不借助第三方的插件的情况下进行文件上传可利用： Form表单 FormData对象 Form表单是不存在浏览器的兼容性的，同时在js被禁用的情况下也能进...

RyanQ 2019-08-19 18:46 评论0 收藏0