vuex頁(yè)面刷新導(dǎo)致數(shù)據(jù)丟失的解決方案
解決vuex頁(yè)面刷新導(dǎo)致數(shù)據(jù)丟失問(wèn)題
vuex數(shù)據(jù)是存在內(nèi)存當(dāng)中，當(dāng)頁(yè)面刷新之后vuex數(shù)據(jù)自然會(huì)丟失。我們有兩種方法解決該問(wèn)題:
1.使用vuex-along
2.使用localStorage或者sessionStroage
1.使用vuex-along
vuex-along的實(shí)質(zhì)也是將vuex中的數(shù)據(jù)存放到localStorage或者sessionStroage中，只不過(guò)這個(gè)存取過(guò)程這個(gè)組件會(huì)幫我們完成,我們只需要用vuex的讀取數(shù)據(jù)方式操作就可以了,簡(jiǎn)單了解一下vuex-along的使用方法。
安裝vuex-along:
npm install vuex-along --save
配置vuex-along: 在store/index.js 中最后添加以下代碼:
import VueXAlong from 'vuex-along' //導(dǎo)入插件
export default new Vuex.Store({
//modules: {
//controler //模塊化vuex
//},
plugins: [VueXAlong({
name: 'store', //存放在localStroage或者sessionStroage 中的名字
local: false, //是否存放在local中 false 不存放 如果存放按照下面session的配置
session: { list: [], isFilter: true } //如果值不為false 那么可以傳遞對(duì)象 其中 當(dāng)isFilter設(shè)置為true時(shí)， list 數(shù)組中的值就會(huì)被過(guò)濾調(diào),這些值不會(huì)存放在seesion或者local中
})]
});
2.使用localStorage或者sessionStroage
created() {
//在頁(yè)面加載時(shí)讀取sessionStorage里的狀態(tài)信息
if (sessionStorage.getItem("store")) {
this.$store.replaceState(
Object.assign(
{},
this.$store.state,
JSON.parse(sessionStorage.getItem("store"))
)
);
}
//在頁(yè)面刷新時(shí)將vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(this.$store.state));
});
},
上面兩種方法都可以解決vuex頁(yè)面刷新導(dǎo)致數(shù)據(jù)丟失問(wèn)題。按照上面的方法配置之后就可以正常使用vuex了，頁(yè)面刷新數(shù)據(jù)也不會(huì)丟失了。
以上就是vuex頁(yè)面刷新導(dǎo)致數(shù)據(jù)丟失的解決方案的詳細(xì)內(nèi)容，更多關(guān)于vuex 數(shù)據(jù)丟失的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
v-bind和v-model是Vue.js中的兩個(gè)常用指令,它們?cè)诠δ芎陀猛旧嫌幸恍﹨^(qū)別,接下來(lái)小編就給大家具有講講vue中v-bind和v-model區(qū)別,感興趣的同學(xué)跟著小編一起來(lái)看看吧2023-08-08
在Vue中Refs是對(duì)DOM元素或已安裝到DOM的其他組件實(shí)例的引用,下面這篇文章主要給大家介紹了關(guān)于Vue3中refs使用的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
vue.js 圖片上傳并預(yù)覽及圖片更換功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue.js 圖片上傳并預(yù)覽及圖片更換功能，小編主要圍繞我們?nèi)粘Ｊ褂霉δ艿睦幼鲋v解，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08
這篇文章主要為大家介紹了c++游戲教程使用easyx實(shí)現(xiàn)大飛機(jī)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue3中實(shí)現(xiàn)組件通信的方法總結(jié)
在Vue3中，有多種方法可以實(shí)現(xiàn)組件之間的通信，本文就通過(guò)代碼示例給大家總結(jié)一些vue3實(shí)現(xiàn)組件通信的常用方法,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue.js表格分頁(yè)示例，ajax異步加載數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
本篇文章旨在帶領(lǐng)大家快速了解和使用?Vue?中的?JSX?語(yǔ)法,好讓大家在?Vue?中遇到或使用?JSX?的時(shí)候能很快入手，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
Vue中的element tabs點(diǎn)擊錨點(diǎn)定位,鼠標(biāo)滾動(dòng)定位
這篇文章主要介紹了Vue中的element tabs點(diǎn)擊錨點(diǎn)定位,鼠標(biāo)滾動(dòng)定位方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue彈窗父子組件調(diào)用問(wèn)題，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
vue實(shí)現(xiàn)路由監(jiān)聽(tīng)和參數(shù)監(jiān)聽(tīng)
今天小編就為大家分享一篇vue實(shí)現(xiàn)路由監(jiān)聽(tīng)和參數(shù)監(jiān)聽(tīng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10