刷新頁面vuex數據不消失和不跳轉頁面

tracymac7 發布于2019-08-26 11:32 / 3173人閱讀

摘要：先說點什么和路由攔截這一塊搗鼓的有一段時間了總算是爬出來了特地來分享一下首先聲明沒有什么基礎介紹用的是登錄狀態存儲的方法進入正題刷新刷新相當與重啟項目，之前獲取到的數據也只是通過暫存起來，項目關閉時就不見了，這有些像電腦重啟，存儲在的數據會

先說點什么

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里的變量刪除

最后再說點什么

希望本文可以給你提供一些幫助,這是我最高興的,覺得我有寫的不對或者有問題的地方也請幫我指正出來,大家互相幫助互相進步!!!

云服務器 GPU云服務器頁面不跳轉注冊頁面不跳轉 jsp不跳轉頁面跳轉 js刷新頁面數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107073.html

Form 提交表單頁面刷新不跳轉

摘要：提交提交數據，但頁面不跳轉，可以使用簡單方法提交表單頁面不跳轉提交頁面返回的數據顯示在中注意中的一定是你要指定要顯示返回結果的標簽中的屬性注意可以放到中的任何位置特別注意可以放到中 1.提交form,action 提交數據，但頁面不跳轉，可以使用Iframe簡單方法 Form提交表單頁面不跳轉

testHs 2019-08-01 14:37 評論0 收藏0
Form 提交表單頁面刷新不跳轉

摘要：提交提交數據，但頁面不跳轉，可以使用簡單方法提交表單頁面不跳轉提交頁面返回的數據顯示在中注意中的一定是你要指定要顯示返回結果的標簽中的屬性注意可以放到中的任何位置特別注意可以放到中 1.提交form,action 提交數據，但頁面不跳轉，可以使用Iframe簡單方法 Form提交表單頁面不跳轉

Darkgel 2019-06-27 10:38 評論0 收藏0
如何實現vue中不跳轉不閃動頁面刷新？provide /inject 完美解決方案

摘要：在的項目中刷新功能你會怎么寫我之前一直用這個方法用戶體驗很不好，因為頁面會閃動一下刷新直到我發現了這個方法不過這個方法貌似有兼容問題，首先要確定一下你的版本，此方法適用原理此方法使用的是來控制的顯示或隱藏，從變為時，會重新渲染區域，在vue的項目中刷新功能你會怎么寫？我之前一直用this.$router.go(0)這個方法用戶體驗很不好，因為頁面會閃動一下刷新直到我發現了這個方法 p...

Lavender 2019-08-23 16:56 評論0 收藏0
Form表單和Iframe實現文件上傳,頁面不跳轉

摘要：文件上傳在不借助第三方的插件的情況下進行文件上傳可利用表單對象表單是不存在瀏覽器的兼容性的，同時在被禁用的情況下也能進行文件的傳輸，因此可以大膽使用。使用表單提交文件一個非常典型的應用場景就是上傳圖片，但是頁面不刷新。文件上傳在不借助第三方的插件的情況下進行文件上傳可利用： Form表單 FormData對象 Form表單是不存在瀏覽器的兼容性的，同時在js被禁用的情況下也能進...

RyanQ 2019-08-19 18:46 評論0 收藏0