vuex中store保存的數(shù)據(jù)诉濒,刷新頁面會清空

初用vuex,項目中需要記錄一些狀態(tài)专挪,來判斷頁面是否為登錄狀態(tài)和頁面是否可被編輯茄猫,此時用到了vuex中的store來存儲一個狀態(tài)。

//首先 安裝vuex
npm install vuex --save  
//新建一個store文件夾脆侮,并在里面創(chuàng)建一個index.js文件勇劣,并導(dǎo)入
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state:{
        //id
        skillId:'',
        //技能狀態(tài)
        checkStatus:''
    }
})

export default store

這里記錄了兩個值一個是id一個是狀態(tài)值checkStatus,然后把創(chuàng)建的store在main.js里導(dǎo)入

import store from "./store"http://vuex

至此,我們可以在所需要的vue文件中為其賦值

this.$store.state.skillId = '需要記錄的id'
//技能狀態(tài)
this.$store.state.checkStatus = '需要記錄的狀態(tài)'

賦值后盆犁,就可以在需要用到這些id和狀態(tài)的vue文件中取值

'自己定義的變量名' = this.$store.state.checkStatus

現(xiàn)在篡九,skillId和checkStatus相當(dāng)于兩個全局變量谐岁,可以在需要的頁面獲取值和更改值。但有一個嚴(yán)重的問題就是榛臼,在我們刷新頁面的時候伊佃,vuex數(shù)據(jù)是重新初始化,無法獲取的沛善,導(dǎo)致出現(xiàn)了空值航揉。
但這不是自己想要的結(jié)果,所以百度了一圈(https://blog.csdn.net/guzhao593/article/details/81435342金刁,http://www.cnblogs.com/padding1015/p/9272809.html)帅涂,找到了解決辦法。
更改store文件下index文件state的定義

const store = new Vuex.Store({
    state:sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')): {
        //id
        skillId:'',
        //技能狀態(tài)
        checkStatus:''
    }
})

以及在App.vue中添加

mounted() {
            window.addEventListener('unload', this.saveState)
        },
        methods: {
            saveState() {
                sessionStorage.setItem('state', JSON.stringify(this.$store.state))
            }
        }

也就是說監(jiān)聽unload方法尤蛮,如果重載頁面就把state存入
sessionStorage媳友,然后在需要state的時候從sessionStorage中取值。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末庆锦,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子轧葛,更是在濱河造成了極大的恐慌,老刑警劉巖艇搀,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件尿扯,死亡現(xiàn)場離奇詭異,居然都是意外死亡焰雕,警方通過查閱死者的電腦和手機(jī)衷笋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來矩屁,“玉大人辟宗,你說我怎么就攤上這事×唢酰” “怎么了泊脐?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長烁峭。 經(jīng)常有香客問我容客,道長秕铛,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任缩挑,我火速辦了婚禮但两,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘供置。我一直安慰自己谨湘,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布芥丧。 她就那樣靜靜地躺著紧阔,像睡著了一般。 火紅的嫁衣襯著肌膚如雪娄柳。 梳的紋絲不亂的頭發(fā)上寓辱,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天,我揣著相機(jī)與錄音赤拒,去河邊找鬼秫筏。 笑死,一個胖子當(dāng)著我的面吹牛挎挖,可吹牛的內(nèi)容都是我干的这敬。 我是一名探鬼主播,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼蕉朵,長吁一口氣:“原來是場噩夢啊……” “哼崔涂!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起始衅,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤冷蚂,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后汛闸,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蝙茶,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年诸老,在試婚紗的時候發(fā)現(xiàn)自己被綠了隆夯。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡别伏,死狀恐怖蹄衷,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情厘肮,我是刑警寧澤愧口,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站轴脐,受9級特大地震影響调卑,放射性物質(zhì)發(fā)生泄漏抡砂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一恬涧、第九天 我趴在偏房一處隱蔽的房頂上張望注益。 院中可真熱鬧,春花似錦溯捆、人聲如沸丑搔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽啤月。三九已至,卻和暖如春劳跃,著一層夾襖步出監(jiān)牢的瞬間谎仲,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工刨仑, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留郑诺,地道東北人。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓杉武,卻偏偏與公主長得像辙诞,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子轻抱,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,514評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 上一章總結(jié)了 Vuex 的框架原理飞涂,這一章我們將從 Vuex 的入口文件開始,分步驟閱讀和解析源碼祈搜。由于 Vuex...
    你的肖同學(xué)閱讀 1,775評論 3 16
  • 姓名:岳沁 學(xué)號:17101223458 轉(zhuǎn)載自:http://blog.csdn.net/h5_queensty...
    丘之心閱讀 2,135評論 0 1
  • 安裝 npm npm install vuex --save 在一個模塊化的打包系統(tǒng)中较店,您必須顯式地通過Vue.u...
    蕭玄辭閱讀 2,927評論 0 7
  • 一:什么是閉包?閉包的用處容燕? (1)閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)泽西。在本質(zhì)上,閉包就 是將函數(shù)內(nèi)部和函數(shù)外...
    xuguibin閱讀 9,542評論 1 52
  • 人傻錢多的時候我不會想怎么去騙錢缰趋,而是,看能不能救一個是一個陕见∶匮可事實證明,還是人類早點毀滅更好评甜。這樣我不用去殺人灰粮,...
    沙加之倫閱讀 184評論 0 0