如何解決刷新頁面vuex數據不消失和不跳轉頁面的問題

小編給大家分享一下如何解決刷新頁面vuex數據不消失和不跳轉頁面的問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

先說點什么

vuex和路由攔截這一塊搗鼓的有一段時間了,總算是爬出來了,特地來分享一下,首先聲明沒有什么基礎介紹,用的是登錄狀態存儲sessionStorage的方法!!!

進入正題

刷新

刷新相當與重啟項目，之前獲取到的數據也只是通過store暫存起來，項目關閉時就不見了，這有些像電腦重啟，存儲在RAM的數據會消失。但是儲存在sessionstorage、localstorage和cookie里的內容不會消失.

Vuex

方法思路

首先得熟悉vuex,官網中介紹 Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式,也就是說vuex中的store中的數據都是臨時的,都是一些變量,頁面刷新重新加載,所有都清空,并且已經在頁面中沒有進行二次登陸,vuex中就一直是空的,所以就分生出了幾個方法

1.因為sessionstorage(關閉頁面會消失)、localstorage和cookie刷新頁面數據不會消失,所以可以把所有請求到的數據都儲存在里邊,用的時候再取

2.使用vuex插件

3.登錄的時候把token和登錄狀態(自定義的)賦值給sessionstorage,當刷新頁面的時候(路由跳轉)從 sessionstorage中獲取token和登錄狀態賦值給store,就會自己重新請求相關頁面的數據

我思考過后我選擇了方法3,只不過這個方法要和路由攔截結合起來,后面路由完事一起貼代碼

代碼

index

actions

// 登錄
 Login({ commit, state }, userInfo) {
  return new Promise((resolve, reject) => {
   login(userInfo).then(response => {
    let token = response.data.token;
    commit('SET_TOKEN', token);
    sessionStorage.setItem('token', token);  //獲取到新的token的時候賦值給sessionStorage

    commit('SET_ISLOGIN', true);  // 登錄成功修改store中的登錄狀態
    resolve()
   }).catch(error => {
    reject(error)
   })
  })
 },

路由

簡單介紹: 路由攔截就相當于路由的'生命周期',在路由的不同時間段插入一個方法,可以在此時間段想要做什么事情,本次只在路由跳轉前搞事情,所以只使用router.beforeEach((to, from, next) => { // ... })即可,具體內容官網都很詳細

main.js

router.beforeEach((to, from, next) => {
 let isLogin = sessionStorage.getItem('isLogin');
 let token = sessionStorage.getItem('token');
 let id = sessionStorage.getItem('id');
 if (to.meta.requireAuth) {  // 判斷是否有權限
  if (!store.state.isLogin && !isLogin && to.path !== '/login') {  // store和sessionStorage中登錄狀態都為false并且跳轉到 不是登錄的頁面時 都強行跳轉到登錄頁面  
   next({
    path: '/login',
   });
  } else if (!isLogin && to.path !== '/login') {  // 已經在登錄頁面進入首頁的時候
   sessionStorage.setItem('isLogin', store.state.isLogin);
   next();
  } else if (isLogin && to.path !== '/login') {  // 登錄進入后刷新頁面時
   store.commit('SET_TOKEN', token);
   store.commit('SET_ISLOGIN', isLogin);
   store.commit('SET_ID', id);
   next();
  } else {
   next();
  }
 }
 else {
  next();
 }
});

坑

1.路由攔截我是寫在main.js文件中的,要注意 一定要寫在vue掛載的上面(new Vue)
2.當點擊登錄的時候 actions中的登錄方法要早于路由攔截
3.退出的登錄的時候 不要忘記把sessionStorage里的變量刪除

以上是“如何解決刷新頁面vuex數據不消失和不跳轉頁面的問題”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！