溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
mutation文件
import {
RECEIVE_PUBLICHTIT
} from './mutation-types'
//保證刷新頁面數據不消失*
function storeLocalStore (state) {
window.localStorage.setItem("publicTit",JSON.stringify(state));
}
export default {
[RECEIVE_PUBLICHTIT] (state,{title}){
state.publicTit = title
storeLocalStore(state)
}
}
用到publicTit屬性的組件
created(){
localStorage.getItem("publicTit")&&
this.$store.replaceState(JSON.parse(localStorage.getItem("publicTit")))
},
在created()生命周期中進行取值操作，這時需要判斷第一次加載項目的時，localStorage沒有publicTit的信息，所以先判斷一下
實現思路 讓vuex中publicTit的狀態和localStorage中保持一致（從localStorage中取值）
優化版：
需要調用屬性的組件
created(){
//在頁面加載時讀取localStorage狀態 復制對象是解決新vuex管理的狀態中新添加的字段也可以存入localStorage中
localStorage.getItem("publicTit") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("publicTit"))));
//在頁面刷新時將vuex里的信息保存到localStorage里，避免多次調用localStorage進行存儲降低性能,beforeunload是在頁面刷新之前調用
window.addEventListener("beforeunload",()=>{
localStorage.setItem("publicTit",JSON.stringify(this.$store.state))
})
}
以上這篇vuex管理狀態 刷新頁面保持不被清空的解決方案就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
