vue vue-router vuex element-ui axios 写一个代理平台的学习笔记（九）解决一下现存的问题

第一个问题

我们现在已经能够使用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
})