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，到此為止呢，登陸存儲功能算是實現了。。。