国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

刷新頁面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁面

tracymac7 / 3182人閱讀

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

先說點(diǎn)什么

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

進(jìn)入正題 刷新

刷新相當(dāng)與重啟項(xiàng)目，之前獲取到的數(shù)據(jù)也只是通過store暫存起來，項(xiàng)目關(guān)閉時(shí)就不見了，這有些像電腦重啟，存儲(chǔ)在RAM的數(shù)據(jù)會(huì)消失。但是儲(chǔ)存在sessionstorage、localstorage和cookie里的內(nèi)容不會(huì)消失.

Vuex 方法思路 
首先得熟悉vuex,官網(wǎng)中介紹 Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式,也就是說vuex中的store中的數(shù)據(jù)都是臨時(shí)的,都是一些變量,頁面刷新重新加載,所有都清空,并且已經(jīng)在頁面中沒有進(jìn)行二次登陸,vuex中就一直是空的,所以就分生出了幾個(gè)方法

1.因?yàn)閟essionstorage(關(guān)閉頁面會(huì)消失)、localstorage和cookie刷新頁面數(shù)據(jù)不會(huì)消失,所以可以把所有請(qǐng)求到的數(shù)據(jù)都儲(chǔ)存在里邊,用的時(shí)候再取
2.使用vuex插件
3.登錄的時(shí)候把token和登錄狀態(tài)(自定義的)賦值給sessionstorage,當(dāng)刷新頁面的時(shí)候(路由跳轉(zhuǎn))從 sessionstorage中獲取token和登錄狀態(tài)賦值給store,就會(huì)自己重新請(qǐng)求相關(guān)頁面的數(shù)據(jù)

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

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的時(shí)候賦值給sessionStorage

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

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

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) {    // 判斷是否有權(quán)限
    if (!store.state.isLogin && !isLogin && to.path !== "/login") {    // store和sessionStorage中登錄狀態(tài)都為false并且跳轉(zhuǎn)到 不是登錄的頁面時(shí) 都強(qiáng)行跳轉(zhuǎn)到登錄頁面    
      next({
        path: "/login",
      });
    } else if (!isLogin && to.path !== "/login") {    // 已經(jīng)在登錄頁面進(jìn)入首頁的時(shí)候
      sessionStorage.setItem("isLogin", store.state.isLogin);
      next();
    } else if (isLogin && to.path !== "/login") {    // 登錄進(jìn)入后刷新頁面時(shí)
      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.當(dāng)點(diǎn)擊登錄的時(shí)候 actions中的登錄方法要早于路由攔截
3.退出的登錄的時(shí)候 不要忘記把sessionStorage里的變量刪除

最后再說點(diǎn)什么

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/107073.html

相關(guān)文章

  • Form 提交表 單頁面刷新不跳轉(zhuǎn)

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

    testHs 評(píng)論0 收藏0

  • Form 提交表 單頁面刷新不跳轉(zhuǎn)

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

    Darkgel 評(píng)論0 收藏0

  • 如何實(shí)現(xiàn)vue中不跳轉(zhuǎn)不閃動(dòng)頁面刷新？provide /inject 完美解決方案

    摘要：在的項(xiàng)目中刷新功能你會(huì)怎么寫我之前一直用這個(gè)方法用戶體驗(yàn)很不好，因?yàn)轫撁鏁?huì)閃動(dòng)一下刷新直到我發(fā)現(xiàn)了這個(gè)方法不過這個(gè)方法貌似有兼容問題，首先要確定一下你的版本，此方法適用原理此方法使用的是來控制的顯示或隱藏，從變?yōu)闀r(shí)，會(huì)重新渲染區(qū)域， 在vue的項(xiàng)目中刷新功能你會(huì)怎么寫？我之前一直用this.$router.go(0)這個(gè)方法用戶體驗(yàn)很不好，因?yàn)轫撁鏁?huì)閃動(dòng)一下刷新直到我發(fā)現(xiàn)了這個(gè)方法 p...

    Lavender 評(píng)論0 收藏0

  • Form表單和Iframe實(shí)現(xiàn)文件上傳,頁面不跳轉(zhuǎn)

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

    RyanQ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<