小編給大家分享一下如何解決刷新頁面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁面的問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
先說點(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)
})
})
},路由
簡單介紹: 路由攔截就相當(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里的變量刪除
以上是“如何解決刷新頁面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁面的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
