解決vue頁面重新整理,資料丟失

2021-10-21 17:51:03 字數 1054 閱讀 2579

最先想到的應該就是利用localstorage/sessionstorage將資料儲存在外部,做乙個持久化儲存,下面是利用localstorage儲存的具體方案:

方案一:由於state中的資料是響應式的,而資料又是通過mutation來進行修改,故在通過mutation修改state中資料的同時呼叫localstorage.setitem()方法來進行資料的儲存。

import vue from 'vue';import vuex from 'vuex';vue.use(vuex);export default new vuex.store(,mutations: ,menulist(s, d) ,}})
if (window.localstorage.getitem("list") ) ,this.$store.state,json.parse(window.localstorage.getitem("list"))))}
if (window.localstorage.getitem("list") ) , this.$store.state,json.parse(window.localstorage.getitem("list"))))}window.addeventlistener("beforeunload",()=>)
這個方法是基於對computed計算屬性的理解,在vue的官方文件中有這麼一段話:

由此得知計算屬性的結果會被快取,也就是說在有快取的情況下,computed會優先使用快取,於是也可以在state資料相對應的頁面這樣寫:

computed:}

頁面重新整理 重新整理vue頁面,解決資料丟失

解決方法一 最先想到的應該就是利用localstorage sessionstorage將資料儲存在外部,做乙個持久化儲存,下面是利用localstorage儲存的具體方案 方案一 由於state中的資料是響應式的,而資料又是通過mutation來進行修改,故在通過mutation修改state中資...

vue 頁面重新整理資料丟失問題

參考 我的需求 進入 後調介面獲取使用者id,並把id存入session中。之後跳轉頁面或重新整理頁面時,直接從session中取出id,無需再調介面。main.js檔案中 import vue from vue import router from router import vuex from ...

解決vuex頁面重新整理資料丟失

在vue中使用vuex做狀態管理,當重新整理頁面時,發現state裡面的資料丟失,這是因為當頁面重新整理時,store裡面的資料就會重新賦值初始化。解決 將state裡面的資料儲存在本地儲存中,這樣在重新整理頁面時就可以直接從本地儲存拿 1.選擇合適的儲存客戶端 localstorage是永久儲存在...