mutation文件

為海寧等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及海寧網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計、成都做網(wǎng)站、海寧網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

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()生命周期中進行取值操作，這時需要判斷第一次加載項目的時，localStorage沒有publicTit的信息，所以先判斷一下

實現(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進行存儲降低性能,beforeunload是在頁面刷新之前調(diào)用
    window.addEventListener("beforeunload",()=>{
     localStorage.setItem("publicTit",JSON.stringify(this.$store.state))
    })
   }

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

當前文章：vuex管理狀態(tài)刷新頁面保持不被清空的解決方案
本文來源：http://jinyejixie.com/article24/pggjje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、微信公眾號、標簽優(yōu)化、網(wǎng)站制作、網(wǎng)站營銷、網(wǎng)站設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)