欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Vuex管理登录状态的分析

程序员文章站 2022-04-07 18:17:01
...
本文主要介绍了详解Vuex管理登录状态,仔细看了一遍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里面的,不知道有没有大神指点一二!

相关推荐:

vuex概念理解和实例教程

关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库

用 Vuex 构建一个笔记应用_html/css_WEB-ITnose

以上就是Vuex管理登录状态的分析的详细内容,更多请关注其它相关文章!