vuex管理狀態(tài) 刷新頁面保持不被清空的解決方案

發(fā)布時間：2020-10-03 06:24:03 來源：腳本之家閱讀：387 作者：WwangXue 欄目：web開發(fā)

mutation文件

import {
 RECEIVE_PUBLICHTIT
} from './mutation-types'
 
//保證刷新頁面數(shù)據(jù)不消失*
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()生命周期中進(jìn)行取值操作，這時需要判斷第一次加載項(xiàng)目的時，localStorage沒有publicTit的信息，所以先判斷一下

實(shí)現(xiàn)思路讓vuex中publicTit的狀態(tài)和localStorage中保持一致（從localStorage中取值）

優(yōu)化版：

需要調(diào)用屬性的組件

created(){
    //在頁面加載時讀取localStorage狀態(tài) 復(fù)制對象是解決新vuex管理的狀態(tài)中新添加的字段也可以存入localStorage中
    localStorage.getItem("publicTit") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("publicTit"))));
 
    //在頁面刷新時將vuex里的信息保存到localStorage里，避免多次調(diào)用localStorage進(jìn)行存儲降低性能,beforeunload是在頁面刷新之前調(diào)用
    window.addEventListener("beforeunload",()=>{
     localStorage.setItem("publicTit",JSON.stringify(this.$store.state))
    })
   }

以上這篇vuex管理狀態(tài) 刷新頁面保持不被清空的解決方案就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

vuex管理狀態(tài) 刷新頁面保持不被清空的解決方案

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽