详解Vuex管理登录状态

　　

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

　　

　　

1,据说储存的vuex商店里面的状态是临时的,右键刷新一下页面这些状态就销毁了(这是据说,请大神解惑我也没办法证实),如果是这样的话,我的用户状态用户还是应该要写sessionStorage入,不然登录了的一刷新页面就变成没登录了,用户不就疯了啊,所以商店里面状的用户态应该要从sessionStorage里面去读。
　　

　　

2,在这个学习项目中现存的页面中,家,产品,常见问题,登录,雷金,应该是不需要登录就可以访问,而经理和经理以下的子页面是必须要登录才可以访问的。
　　

　　

3,比较特殊的是登录和雷金,如果用户已经登录了,再去访问这2个页面,原则上来说也是可以的,但如果已经登录了,再用其它账号来登录一次,那sessionStorage存在2个用户数据,那就显然不合理了,所以应该规定,如果用户已经登录,又去访问登录或者雷金,那我们应先删除掉sessionStorage里用户面数据
　　

　　

4, vuex规定所有状态的改变只能依靠突变,而要驱动突变去改变状态的只能是行动。那在这个项目里登录状态变化只会有登录,注册和登出这三种情况,登录和注册成功的时候要去执行一个存在用户的行动,登出的时候去执行一个不存在用户的行动。
　　

　　

5, vuex官方还提了一个getter的玩意儿,我感觉应该是在我们需要取用商店里面状态的时候,确切的说应该是取出这个状态之后,给这个状态做一些加工改变用的,而且应该只能吸气一次吧,多了感觉要乱套啊(不知道这个想法对不对),但看见这样的写法。store.getters美元。doneTodosCount,感觉应该可以用不止一次把。估计我想得有点多了,目前看起来也用不上,也许要经历过需要的应用场景才能理解透彻把。
　　

　　

6,还有个模块,这个就有点迷了,没太搞懂,先不管了
　　

　　

预想中存储的登录状态还是要从sessionStorage来取的,所以我先把路由约束好,那些页面需要用户,那些不需要,访问那些页面需要删除用户

　　

打开主要。js
　　

　　

添加代码

　　 　　//这个官方名字叫导航守卫,挺形象的 　　路由器。beforeEach(下),从=比;{//如果是去登录或注册,那就先把用户移除 　　如果()。路==='/登录' | |。路===/雷金){ 　　sessionStorage.removeItem(“用户”) 　　} 　　让用户=JSON.parse (sessionStorage.getItem(“用户”)) 　　如果(!用户,,(。路==='/经理/我' | |。路==='/经理/发送' | |。路==='/经理/历史')){ 　　next({路径:'/登录'}) 　　其他}{ 　　next () 　　} 　　}) 　　之前 　　 　　

这样写感觉怪怪的,不知道有没有简单点的写法?
　　

　　

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

　　

然后尝试写商店
　　

　　

先写个基本结构

　　

　　

是说这需要一个函数# 63;
　　

　　

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

　　

商店。js
　　

　　 　　 　　从“Vue”进口Vue 　　从“Vuex”进口Vuex 　　 　　Vue.use (Vuex)//创建基本状态 　　const状态={//登录状态为没登录 　　已登陆:假的,//用户信息数据,目前只需要头像和名字,还是把用户名也加上吧 　　LoginedUser: { 　　名称:”, 　　《阿凡达》:”, 　　用户名:“ 　　} 　　}//创建改变状态的方法 　　const突变={//改变状态的方法也需要2个,一个是登录或注册了,一个是登出了//这里不能写箭头函数& # 63;& # 63;& # 63;//登录 　　登录(状态){//先让登录状态变为登录了 　　状态。已登陆=true//然后去sessionStorage取用户数据 　　让用户=JSON.parse (sessionStorage.getItem(“用户”))//再把用户数据发下去 　　state.LoginedUser.name=user.name 　　state.LoginedUser。《阿凡达》=user.avatar 　　state.LoginedUser。用户名=user.username 　　}，//登出 　　注销(状态){//这个同理 　　状态。已登陆=false 　　state.LoginedUser.name=" 　　state.LoginedUser。《阿凡达》=" 　　state.LoginedUser。用户名=" 　　} 　　}//创建驱动行为可以使得突变得以启动 　　const行动={//这里先来一个驱动登录的东西就叫登录吧//这个上下文是官方写的,应该叫什么无所谓 　　登录(上下文){ 　　context.commit(登录) 　　}，//同样来个注销 　　注销(上下文){ 　　context.commit(注销) 　　} 　　} 　　 　　出口默认新Vuex.Store ({ 　　状态, 　　突变, 　　行动 　　}) 　　 　　

详解Vuex管理登录状态