vue vue-router vuex element-ui a
2017-11-12 本文已影响0人
思吾谓何思
我们现在已经能够使用vuex来管理登录登出状态了,但用this.$store.dispatch('logout')的方式写在main.js里面却不能生效,其实这完全不是问题,是我太蠢了........
事实上是这样的:store.js是js文件,main.js也是js文件,我已经把store.js引入到了main.js里面,难道store.js里面的方法在main.js里面还不生效了?如果不生效那在xxxxx.vue里面更不可能生效,所以这是一叶障目不见泰山啊。按照正常逻辑此时store.js就是在main.js里面的,所以我要分发action,完全不需要this.$store.xxxxxx啊,直接写store.xxxxxx就可以了啊,this.$store本身就是给全局vue文件使用的全局方法
Image 110.png所以main.js这样写就好了
Image 111.png
这样即便在登录中在地址栏/login也不会出现头像还在的问题
Image 112.png
Image 113.png
直接就变成登录按钮了,很正常了
第二个问题,在没有登录状态去访问我的工作台页面,会直接跳到登录页面,但我们应该给用户一个提示,需要登录才能访问,不然万一用户以为这个系统有问题
打开header.vue,添加代码
第三个问题
首先我登录
Image 116.png
然后我F5刷新一下页面
Image 117.png
登录状态不见了,但页面仍然停留在需要登录才能访问的个人信息的页面
我再点击发货管理,更神奇
Image 118.png
我的确在发货管理页面,但提示了我该登录,那现在是登录状态还是非登录状态?
此时的情况应该是这样的:
sessionStorage里面的user是还在的,我并没有执行remove的操作,但我刷新页面,store里面的状态全部回到了初始状态(未登录状态,个人信息全是空的)【如此也解决了一个我的疑惑,刷新页面的确会初始化store里面的状态】
出现我现在这个情况的根源是:我在验证路由跳转时用的判断是sessionStorage里面是否有user(因为此时sessionStorage里面有user,所以此时我可以访问send页面),而我写提示信息是用的store里面的logined是否为真假(因为初始state,logined=fasle,所以会提示我应该登录)
这是证据
Image 119.png
这是main.js里面我用来验证跳转的
Image 120.png
这是header.vue里面我用来写提示的判断(logined就是store里面的状态)
问题是找到了,但我们该如何解决?
重点:我们肯定要以sessionStorage里面是否存在user作为是否登录的判断,不能用户一刷新页面还要再次去登录吧(刷新这个操作还是很频繁的)
所以我们只能去改写store,从stored的逻辑来解决
- 1、store里面的初始状态不能由我们来指定,而应该去找sessionStorage里面的user要,然后怎么写还没想好,一步步的来
打开store.js
写了一大堆也没成功,容我休息一下再写
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 创建基本状态
const state = {
// // 登录状态为没登录
// logined: false,
// // 用户信息数据,目前只需要avatar和name,还是把username也加上吧
// LoginedUser: {
// name: '',
// avatar: '',
// username: ''
// }
/* 另一种写法,上面的写法不好用 */
// 将一个函数的返回对象作为初始状态,与vue中data 需要作为一个函数的return一样
state () {
// 暂时这样写把我也不知道行不行
let user = sessionStorage.getItem('user')
let logined = false
let LoginedUser = null
if (user) {
LoginedUser = JSON.parse(user)
logined = true
return {logined, LoginedUser}
} else {
return {logined, LoginedUser}
}
// return new Promise((resolve, reject) => {
// let user = JSON.parse(sessionStorage.getItem('user'))
// let logined = false
// let LoginedUser = null
// // let hasUser = () {}
// if (user) {
// LoginedUser = JSON.stringify(user)
// logined = true
// resolve({logined, LoginedUser})
// } else {
// resolve({logined, LoginedUser})
// }
// })
}
}
// 创建改变状态的方法
const mutations = {
// 改变状态的方法也需要2个,一个是登录或注册了,一个是登出了
// 这里不能写箭头函数???
// 登录
LOGIN (state) {
// 先让登录状态变为登录了
state.logined = true
// 然后去sessionStorage取用户数据
let user = sessionStorage.getItem('user')
state.LoginedUser = JSON.stringify(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 ({commit}) {
commit('LOGIN')
},
// 同样来个logout
logout ({commit}) {
commit('LOGOUT')
}
}
export default new Vuex.Store({
state,
mutations,
actions
})