第一个问题
我们现在已经能够使用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文件使用的全局方法
所以main.js这样写就好了
这样即便在登录中在地址栏/login也不会出现头像还在的问题
直接就变成登录按钮了，很正常了
第二个问题
在没有登录状态去访问我的工作台页面，会直接跳到登录页面，但我们应该给用户一个提示，需要登录才能访问，不然万一用户以为这个系统有问题
打开header.vue,添加代码
第三个问题
首先我登录
然后我F5刷新一下页面
登录状态不见了，但页面仍然停留在需要登录才能访问的个人信息的页面
我再点击发货管理，更神奇
我的确在发货管理页面，但提示了我该登录，那现在是登录状态还是非登录状态？
此时的情况应该是这样的： sessionStorage里面的user是还在的，我并没有执行remove的操作，但我刷新页面，store里面的状态全部回到了初始状态（未登录状态，个人信息全是空的）【 如此也解决了一个我的疑惑，刷新页面的确会初始化store里面的状态】 出现我现在这个情况的根源是：我在验证路由跳转时用的判断是sessionStorage里面是否有user（因为此时sessionStorage里面有user,所以此时我可以访问send页面）,而我写提示信息是用的store里面的logined是否为真假（因为初始state,logined=fasle,所以会提示我应该登录）
这是证据
这是main.js里面我用来验证跳转的
这是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})