刷新頁面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裡的變數刪除

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

使用js如何呼叫json

#在Nodejs下使用gm裁剪在合成圖片

如何使用babel安裝設定教學

以上是刷新頁面vuex資料不消失和不跳轉頁面問題（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！