未加星标

详解Vuex管理登录状态

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

又仔细看了一遍vuex的文档,还是云里雾里的,不过至少明白它是一个专门管理状态的,根据数据状态的改变可以驱动视图更新,既然是这样那至少登录注册是一种状态,就用登录来做测试,学习vuex,不过话说回来,既然专门管理状态,那我至少要仔细推敲一下这个learn的学习项目有那些状态逻辑。

详解Vuex管理登录状态
1、据说储存的vuex store里面的状态是临时的,右键刷新一下页面这些状态就销毁了(这是据说,请大神解惑我也没办法证实),如果是这样的话,我的用户状态user还是应该要写入sessionStorage,不然登录了的一刷新页面就变成没登录了,用户不就疯了啊。所以store里面的user状态应该要从sessionStorage里面去读。
2、在这个learn项目中现存的页面中,home,paroducts,FAQ,login,regin,应该是不需要登录就可以访问,而manger和manger以下的子页面是必须要登录才可以访问的。
3、比较特殊的是login和regin,如果用户已经登录了,再去访问这2个页面,原则上来说也是可以的,但如果已经登录了,再用其它账号来登录一次,那sessionStorage存在2个user数据,那就显然不合理了,所以应该规定,如果用户已经登录,又去访问login或者regin,那我们应先remove掉sessionStorage里面user数据
4、vuex规定所有状态的改变只能依靠mutation,而要驱动mutation去改变状态的只能是action。那在这个项目里登录状态变化只会有登录、注册和登出这三种情况,登录和注册成功的时候要去执行一个存在user的action,登出的时候去执行一个不存在user的action。
5、vuex官方还提了一个getter的玩意儿,我感觉应该是在我们需要取用store里面状态的时候,确切的说应该是取出这个状态之后,给这个状态做一些加工改变用的,而且应该只能getter一次吧,多了感觉要乱套啊(不知道这个想法对不对),但看见这样的写法this.$store.getters.doneTodosCount,感觉应该可以用不止一次把。估计我想得有点多了,目前看起来也用不上,也许要经历过需要的应用场景才能理解透彻把。
6、还有个module,这个就有点迷了,没太搞懂,先不管了

预想中store的登录状态还是要从sessionStorage来取的,所以我先把路由约束好,那些页面需要user,那些不需要,访问那些页面需要remove user

打开main.js

添加代码

// 这个官方名字叫导航守卫,挺形象的
router.beforeEach((to, from, next) => {
// 如果是去登录或注册,那就先把user移除
if (to.path === '/login' || to.path === '/regin') {
sessionStorage.removeItem('user')
}
let user = JSON.parse(sessionStorage.getItem('user'))
if (!user && (to.path === '/manger/my' || to.path === '/manger/send' || to.path === '/manger/history')) {
next({ path: '/login' })
} else {
next()
}
})
这样写感觉怪怪的,不知道有没有简单点的写法?

不过想要的效果是能达到的

然后尝试写store

先写个基本结构

详解Vuex管理登录状态

然后一步一步具体写

详解Vuex管理登录状态
是说这需要一个function?

唉哟,不对,我蠢了,这是赋值(不知道说赋值准不准确)嘛,又不是写一个obj对象,不需要逗号的哈

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 创建基本状态
const state = {
// 登录状态为没登录
logined: false,
// 用户信息数据,目前只需要avatar和name,还是把username也加上吧
LoginedUser: {
name: '',
avatar: '',
username: ''
}
}
// 创建改变状态的方法
const mutations = {
// 改变状态的方法也需要2个,一个是登录或注册了,一个是登出了
// 这里不能写箭头函数???
// 登录
LOGIN (state) {
// 先让登录状态变为登录了
state.logined = true
// 然后去sessionStorage取用户数据
let user = JSON.parse(sessionStorage.getItem('user'))
// 再把用户数据发下去
state.LoginedUser.name = user.name
state.LoginedUser.avatar = user.avatar
state.LoginedUser.username = user.username
},
// 登出
LOGOUT (state) {
// 这个同理
state.logined = false
state.LoginedUser.name = ''
state.LoginedUser.avatar = ''
state.LoginedUser.username = ''
}
}
// 创建驱动actions可以使得mutations得以启动
const actions = {
// 这里先来一个驱动LOGIN的东西就叫login吧
// 这个context是官方写的,应该叫什么无所谓
login (context) {
context.commit('LOGIN')
},
// 同样来个logout
logout (context) {
context.commit('LOGOUT')
}
}
export default new Vuex.Store({
state,
mutations,
actions
})
我感觉应该就这样就可以了吧,还是要测试一下
不对还应该要把action挂到该挂的地方,然后该引用store状态的地方引用store的数据

先去登录页面挂action

详解Vuex管理登录状态

应该是这样的,注册也是一样

详解Vuex管理登录状态
然后是登出的页面

header.vue

详解Vuex管理登录状态
同时我们就不在创建页面的时候从sessionStorage取数据了

还有一个main.js

详解Vuex管理登录状态

要是不能在main.js里面生效还真是麻烦啊,试想一下,已登录用户直接去了/login页面,seeionStorage里面用户数据清除了,但store里面的数据又没更新,那在头部不是还挂一个头像啊???

还有一步获取store里面的数据

header.vue

详解Vuex管理登录状态
还是赶紧测试一下吧

哭了.....直接四个错误

详解Vuex管理登录状态

这我都是照着官方说的写的啊

 
详解Vuex管理登录状态

把header.vue的数据注释掉,还有一个错误

详解Vuex管理登录状态

但这个dispatch 是undefined 是啥意思啊,我是照着写的啊,大佬帮我解惑一下啊

详解Vuex管理登录状态
把dispatch 改成context 也不行

改成commit 试一下

详解Vuex管理登录状态
还是一样没脾气了,我再去看看资料吧

研究了好久解决了一部分问题

首先我把store.js,里面的action写成了这样

详解Vuex管理登录状态

但我觉得原来的写法也没有错

然后在main.js里面注释掉了这句

详解Vuex管理登录状态

然后就正常了,dispatch是正确的,所以我所担心的事果然发生了

先去登录

详解Vuex管理登录状态
详解Vuex管理登录状态

可以看见header右上方的确立刻变成了用户信息,达到了要求,然而我要是自己去地址栏输入/login

详解Vuex管理登录状态

详解Vuex管理登录状态

跳到了登录页面,但头像真的还挂在右上角........,说明store里面真的还是登录的数据,虽然仔细想想其实这并没有什么影响,他要是再一次登录成功,数据自然也就变了,而且一般没人会这么去访问登录页面,但心里觉得这样不对啊。

而且我觉得这个action的分发应该有办法写在main.js里面的,不知道有没有大神指点一二!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 数据UT其实
分页:12
转载请注明
本文标题:详解Vuex管理登录状态
本站链接:http://www.codesec.net/view/568356.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(13)