最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置： 首頁 - 科技 - 知識百科 - 正文

vue單頁應用在頁面刷新時保留狀態(tài)數(shù)據(jù)的方法

來源：懂視網(wǎng) 責編：小采 時間：2020-11-27 22:07:08
文檔

vue單頁應用在頁面刷新時保留狀態(tài)數(shù)據(jù)的方法

vue單頁應用在頁面刷新時保留狀態(tài)數(shù)據(jù)的方法:在Vue單頁應用中，如果在某一個具體路由的具體頁面下點擊刷新，那么刷新后，頁面的狀態(tài)信息可能就會丟失掉。這時候應該怎么處理呢？如果你也有這個疑惑，這篇文章或許能夠幫助到你 一、問題 現(xiàn)在產(chǎn)品上有個需求：單頁應用走到某個具體的頁面，然后點擊刷新后
推薦度：
導讀vue單頁應用在頁面刷新時保留狀態(tài)數(shù)據(jù)的方法:在Vue單頁應用中，如果在某一個具體路由的具體頁面下點擊刷新，那么刷新后，頁面的狀態(tài)信息可能就會丟失掉。這時候應該怎么處理呢？如果你也有這個疑惑，這篇文章或許能夠幫助到你 一、問題 現(xiàn)在產(chǎn)品上有個需求：單頁應用走到某個具體的頁面，然后點擊刷新后

在Vue單頁應用中，如果在某一個具體路由的具體頁面下點擊刷新，那么刷新后，頁面的狀態(tài)信息可能就會丟失掉。這時候應該怎么處理呢？如果你也有這個疑惑，這篇文章或許能夠幫助到你

一、問題

現(xiàn)在產(chǎn)品上有個需求：單頁應用走到某個具體的頁面，然后點擊刷新后，刷新的頁面要與刷新前的頁面要保持一致。

這時候就需要我們保存刷新之前頁面的狀態(tài)。

二、一種解決方案

在這個Vue單頁應用中，王二是用Vuex作為狀態(tài)管理的，一開始王二的思路是將Vuex里的數(shù)據(jù)同步更新到localStorage里。

即：一改變vuex里的數(shù)據(jù),便觸發(fā)localStorage.setItem 方法，參考如下代碼：

import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex)
 
function storeLocalStore (state) {
 window.localStorage.setItem("userMsg",JSON.stringify(state));
}
 
export default new Vuex.Store({
 state: {
 username: "王二",
 schedulename: "標題",
 scheduleid: 0,
 },
 mutations: {
 storeUsername (state,name) {
 state.username = name
 storeLocalStore (state)
 },
 storeSchedulename (state,name) {
 state.schedulename = name
 storeLocalStore (state)
 },
 storeScheduleid (state,id) {
 state.scheduleid = Number(id)
 storeLocalStore (state)
 },
 }
})

然后在頁面加載時再從localStorage里將數(shù)據(jù)取回來放到vuex里，于是王二在 App.vue 的 created 鉤子函數(shù)里寫下了如下代碼：

localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));
 
//考慮到第一次加載項目時localStorage里沒有userMsg的信息，所以在前面要先做判斷

這樣就能比較圓滿的解決問題了。

三、另一種解決方案

以上的解決方法由于要頻繁地觸發(fā) localStorage.setItem 方法，所以對性能很不友好。而且如果一直同步vuex里的數(shù)據(jù)到localStorage里，我們直接用localStorage做狀態(tài)管理好了，似乎也沒有必要再用vuex。

這時候王二想，如果有什么方法能夠監(jiān)聽到頁面的刷新事件，然后在那個監(jiān)聽方法里將Vuex里的數(shù)據(jù)儲存到localStorage里，那該多好。

很幸運，還真有這樣的監(jiān)聽事件，我們可以用 beforeunload 來達到以上目的，于是王二在 App.vue 的 created 鉤子函數(shù)里寫下了如下代碼：

 //在頁面加載時讀取localStorage里的狀態(tài)信息
 localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));
 
 //在頁面刷新時將vuex里的信息保存到localStorage里
 window.addEventListener("beforeunload",()=>{
 localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
 })

這樣的話，似乎就比較完美了。

2018年03月27日補充：

王二在使用上述方法時，遇到了一個問題，就是：在開發(fā)階段，如果在Vuex里添加新的字段，則新的字段不能被保存到localStorage里，于是上述代碼修改如下：

 //在頁面加載時讀取localStorage里的狀態(tài)信息
 localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
 
 //在頁面刷新時將vuex里的信息保存到localStorage里
 window.addEventListener("beforeunload",()=>{
 localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
 })

以上這篇vue單頁應用在頁面刷新時保留狀態(tài)數(shù)據(jù)的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

vue單頁應用在頁面刷新時保留狀態(tài)數(shù)據(jù)的方法

vue單頁應用在頁面刷新時保留狀態(tài)數(shù)據(jù)的方法:在Vue單頁應用中，如果在某一個具體路由的具體頁面下點擊刷新，那么刷新后，頁面的狀態(tài)信息可能就會丟失掉。這時候應該怎么處理呢？如果你也有這個疑惑，這篇文章或許能夠幫助到你 一、問題 現(xiàn)在產(chǎn)品上有個需求：單頁應用走到某個具體的頁面，然后點擊刷新后
推薦度：
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top