我们现在已经能够使用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 115.png
第三个问题
首先我登录
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
})
网友评论