当用户登录成功之后，需要将当前用户的登录信息保存在本地，方便后面使用。具体实现如下：

登录成功保存数据

在登录操作执行成功之后，通过commit操作将数据提交到store中，核心代码如下：

  1. this.postRequest('/login', {
  2.     username: this.loginForm.username,
  3.     password: this.loginForm.password
  4. }).then(resp=> {
  5.     if (resp && resp.status == 200) {
  6.     var data = resp.data;
  7.     _this.$store.commit('login', data.msg);
  8.     var path = _this.$route.query.redirect;
  9.     _this.$router.replace({path: path == '/' || path == undefined ? '/home' : path});
  10.     }
  11. });

store

store的核心代码如下：

  1. export default new Vuex.Store({
  2.   state: {
  3.     user: {
  4.       name: window.localStorage.getItem('user' || '[]') == null ? '未登录' : JSON.parse(window.localStorage.getItem('user' || '[]')).name,
  5.       userface: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).userface
  6.     }
  7.   },
  8.   mutations: {
  9.     login(state, user){
  10.       state.user = user;
  11.       window.localStorage.setItem('user', JSON.stringify(user));
  12.     },
  13.     logout(state){
  14.       window.localStorage.removeItem('user');
  15.     }
  16.   }
  17. });

为了减少麻烦，用户登录成功后的数据将被保存在localStorage中（防止用户按F5刷新之后数据丢失），以字符串的形式存入，取的时候再转为json。当用户注销登陆时，将localStorage中的数据清除。