web前端|js教程
vuex,刷新页面,vuex刷新页面数据消失,vuex刷新页面数据不消失
web前端-js教程
这篇文章主要介绍了详解刷新页面vuex数据不消失和不跳转页面的解决，现在分享给大家，也给大家做个参考。
游戏交易平台源码,ubuntu压缩打包命令,tomcat7的使用,nodejs爬虫教学,php的有趣特性,凡科搭建的官网可以做seo吗lzw
先说点什么
免费购物源码,ubuntu 远程仓库配置,爬虫程序运行流程,.php文档乱码,优酷 seolzw
vuex和路由拦截这一块捣鼓的有一段时间了,总算是爬出来了,特地来分享一下,首先声明没有什么基础介绍,用的是登录状态存储sessionStorage的方法!!!
易语言播放音乐源码,vscode设置lua,ubuntu中录制屏幕命令,tomcat 和 php,sqlite获取表里字段,jquery多附件上传插件下载地址,免费好用的前端框架,爬虫获取客户电话,php 割字符,绵阳seo服务,大型培训信息网站系统源码,电子商务网页,仿模板下载吧,原生页面,课程管理系统模板 模板之家,转盘抽奖红包小程序lzw
进入正题
刷新
刷新相当与重启项目，之前获取到的数据也只是通过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( oken, 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( oken); 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) { // 登录进入后刷新页面时 mit(SET_TOKEN, token); mit(SET_ISLOGIN, isLogin); mit(SET_ID, id); next(); } else { next(); } } else { next(); }});
坑
1.路由拦截我是写在main.js文件中的,要注意 一定要写在vue挂载的上面(new Vue)
2.当点击登录的时候 actions中的登录方法要早于路由拦截
3.退出的登录的时候 不要忘记把sessionStorage里的变量删除
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
使用js如何调用json
在Nodejs下使用gm裁剪在合成图片
如何使用babel安装配置教学
