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 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的逻辑来解决

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
})

上一篇下一篇

猜你喜欢

热点阅读