16. Vue 登录存储

 存储方法：第一种（Vuex）（PS：刷新就清空时使用或者使用eventBus全局变量也行。） 第二种（sessionStorage）（PS：刷新不清空关闭窗口才清空时请用。） 第三种（localStorage）（PS：关闭浏览器都不清空时才使用。） 

在此之前呢，先简单了解下他们的操作使用吧！

　　sessionStorage的操作：

　　　　设置：sessionStorage.setItem('userData')

　　 　　 获取：sessionStorage.getItem('userData')

　　 　　 清除：sessionStorage.clear('userData')

　　localStorage的操作：

　　　　设置：localStorage.setItem('userData')

　　　　获取：localStorage.getItem('userData')

　　　　清除：localStorage.removeItem('userData')

做登录存储时呢，网上看了很多参考，最后结合这些跟自己的理解整理了一下详细如下(仅供参考)（另外呢说明一下，我这里采用的是vuex的方法但值是以sessionStorage来存储赋值）：

　　目录：（创建store文件夹，再创建store.js文件）

 　　　　

　　main.js文件下：

　　　　

　　　　

　　store.js文件下：（我这里的变量userData变量的值采用的sessionStorage方法，也可换成常量或者locaStorage方式。）

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        userData: sessionStorage.getItem('userData') ? sessionStorage.getItem('userData') : ''
    },
    getters: {

    },
    mutations: {
        setUserData: (state, userData) => {
            state.userData = userData;
            sessionStorage.setItem('userData', JSON.stringify(userData));
        },
    }
  });

　　login.vue中登录成功后：

　　　　1.调用setUserData方法修改state中变量userData的值：this.$store.commit('setUserData',res.data);

　　　　2.跳转页面之前呢，先做个判断，判断用户是否登陆（即使用 router.beforeEach 注册一个全局前置守卫）

　　　　　　router文件夹下的index.js文件中代码如下：

import Vue from 'vue'
import Router from 'vue-router'

import Login from '@/components/Login/Login'        //登录界面

Vue.use(Router)

const router = new Router({
  mode: 'history',  //去除地址路径后的#号
  routes: [
    // {
    //   path: '/',
    //   name: 'HelloWorld',
    //   component: HelloWorld
    // },
    {
      path: '/',
      name: 'Login',
      component: Login,
      meta: {
        isLogin: false
      }
    },
  ]
});

// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
  if (to.path === '/') {
    next();
  } else {
    //非跳转到登录界面时，判断本地存储userData是否为null或空，为空则跳回到登录界面，反之到相应的界面(此时有数据)。
    let userData = JSON.parse(sessionStorage.getItem('userData'));
    if (userData === null || userData === '') {
      next('/');
    } else {
      next();
    }
  }
});
 
export default router

　　3.跳转到主页面：this.$router.push({path:'../index',query:{data:res.data}});　　　　//此处的query可有可无

　　4.进入到主页后，从store中取出用户的信息userData,并判断是否需要转为对象，再赋值用户的个人中心，　

 // console.log(JSON.parse(sessionStorage.getItem('userData')))
 // console.log(typeof(this.$store.state.userData))

  let userData;
  if(typeof(this.$store.state.userData) == 'object'){
         userData = this.$store.state.userData;
  }else{
         userData = JSON.parse(this.$store.state.userData);
  }
                      

　　如果有修改个人信息的操作，则在其执行成功后调用store.js文件中的state下的userData变量并判断是否为对象类型来是否进行转为对象操作，修改其中需要修改的参数并赋上最新值，并刷新个人信息：

　　（ps：我这里是修改手机号）

let newUserDate;
if(typeof(this.$store.state.userData) == 'string'){
 　　newUserDate = JSON.parse(this.$store.state.userData);
}else{
　　 newUserDate = this.$store.state.userData;
}
newUserDate.mobileNo = this.ruleForm.phoneNumber;　　//修改其中参数的值

this.$store.commit('setUserData',newUserDate);　　　　//使用该方法调用setUserData更新userData的值
this.$refs.head_child.getPersonalInfo();　　　　　　　 //刷新个人信息

　　退出登录时呢：

　　　　  sessionStorage.clear('userData'); //清空sessionStorage中名为userData的值  　　2 this.$router.push({path: "/"}); //回到登录界面 

　　　　

ok，到此为止呢，登陆存储功能算是实现了。。。