最近vue項(xiàng)目中遇到了一個(gè)比較棘手的問(wèn)題: 例如第一個(gè)頁(yè)面是列表,通過(guò)選中一行進(jìn)入第二個(gè)頁(yè)面展示選中內(nèi)容的詳細(xì)信息,這個(gè)時(shí)候選中的信息保存在vuex.可是這個(gè)時(shí)候就出現(xiàn)了一個(gè)問(wèn)題,我不能在第二個(gè)頁(yè)面通過(guò)瀏覽器刷新,否則vuex數(shù)據(jù)清空,則第二個(gè)頁(yè)面將會(huì)不知道展示什么內(nèi)容了,顯然這一是嚴(yán)重的bug!? 前端開(kāi)發(fā)眾所周知在瀏覽器保存數(shù)據(jù)使用session或者cookie,這當(dāng)然是可行的,不過(guò)如果每一條需要存儲(chǔ)的信息都去執(zhí)行存儲(chǔ)到session然后在通過(guò)session的數(shù)據(jù)賦值到項(xiàng)目對(duì)應(yīng)的數(shù)據(jù)下則導(dǎo)致項(xiàng)目看起來(lái)過(guò)于臃腫了
所以通過(guò)各種百度找出來(lái)vuex的plugins,可以很好的解決我遇到的問(wèn)題,vuex的用法就不介紹了,請(qǐng)參考官方文檔
以下步驟是plugins的用法
LStorage.getItem(key): 通過(guò)key可以獲取sessionStorage的value
LStorage.setItem(key, val): 存儲(chǔ)數(shù)據(jù)
LStorage.clear(): 清除所有的session記錄
LStorage.removeItem(key): 刪除制定的session記錄
myPlugins函數(shù)里邊的每次頁(yè)面刷新的時(shí)候會(huì)先獲取session的數(shù)據(jù)通過(guò)commit方法保存到vuex
store.subscribe方法是在關(guān)聯(lián)store的commit事件,也就是只要你通過(guò)commit在修改vuex的數(shù)據(jù)這里的函數(shù)就會(huì)監(jiān)聽(tīng)到,并且執(zhí)行里邊的內(nèi)容保存數(shù)據(jù)到session
vuex添加plugins, myPlugins的參數(shù)可以根據(jù)自己的需要調(diào)整
好了關(guān)于這個(gè)問(wèn)題就這樣解決了,如果有什么不對(duì)的地方歡迎指正,獻(xiàn)丑了O(∩_∩)O ~~
