快捷導(dǎo)航

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

更新時(shí)間：2019年11月11日 19:29:22 作者：WwangXue

今天小編就為大家分享一篇vuex管理狀態(tài) 刷新頁面保持不被清空的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

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)行取值操作，這時(shí)需要判斷第一次加載項(xiàng)目的時(shí)，localStorage沒有publicTit的信息，所以先判斷一下

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

優(yōu)化版：

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

created(){
    //在頁面加載時(shí)讀取localStorage狀態(tài) 復(fù)制對象是解決新vuex管理的狀態(tài)中新添加的字段也可以存入localStorage中
    localStorage.getItem("publicTit") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("publicTit"))));
 
    //在頁面刷新時(shí)將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)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

關(guān)于vue-treeselect的基本用法
vue-treeselect?是一個(gè)多選組件，具有對?Vue.js嵌套選項(xiàng)支持，這篇文章主要介紹了關(guān)于vue-treeselect的基本用法,需要的朋友可以參考下
2022-11-11
vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)的問題及解決
這篇文章主要介紹了vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表（1）
這篇文章主要為大家詳細(xì)介紹了VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-06-06
解決element-ui?el-drawer抽屜el-dialog彈框關(guān)閉優(yōu)化demo
這篇文章主要為大家介紹了解決element-ui?el-drawer抽屜el-dialog彈框關(guān)閉優(yōu)化demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>
2023-06-06
vue實(shí)現(xiàn)數(shù)字+英文字母組合鍵盤功能
這篇文章主要介紹了vue實(shí)現(xiàn)數(shù)字+英文字母組合鍵盤功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12
解析Vue.use()是干什么的
今天通過本文給大家分享Vue.use是什么，主要包括vueEsign?插件的install是什么，element-ui的install是什么，為什么有的庫就不需要使用Vue.use，對vue.use()相關(guān)知識感興趣的朋友一起看看吧
2022-06-06
詳解vue2.0監(jiān)聽屬性的使用心得及搭配計(jì)算屬性的使用
這篇文章主要介紹了vue2.0之監(jiān)聽屬性的使用心得及搭配計(jì)算屬性的使用,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-07-07
vue實(shí)現(xiàn)換膚功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)換膚功能，一套深色，一套淺色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
Vue-Cli項(xiàng)目優(yōu)化操作的實(shí)現(xiàn)
這篇文章主要介紹了Vue-Cli項(xiàng)目優(yōu)化操作,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
element-plus中el-upload組件限制上傳文件類型的方法
?Element Plus 中,el-upload 組件可以通過設(shè)置 accept 屬性來限制上傳文件的格式,這篇文章主要介紹了element-plus中el-upload組件限制上傳文件類型,需要的朋友可以參考下
2024-02-02