快捷導(dǎo)航

nuxt中刷新頁面后防止store值丟失問題

更新時間：2023年10月11日 09:55:40 作者：古墩古墩

這篇文章主要介紹了nuxt中刷新頁面后防止store值丟失問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

nuxt刷新頁面后防止store值丟失

配置插件（）

plugins: [
    {src:'~/plugins/storeCache',ssr: false},
  ],

注意：

要禁止服務(wù)端運(yùn)行，不然會報錯，這個事件是在客戶端添加的，不是在服務(wù)端小渲染的時候添加的。

在plugins/storeCache.js

寫代碼，如下。

export default function(ctx){
    //離開頁面 刷新前 將store中的數(shù)據(jù)存到session
    window.addEventListener('beforeunload', ()=> {
        sessionStorage.setItem("storeCache",JSON.stringify(ctx.store.state))
    });
    //頁面加載完成  將session中的store數(shù)據(jù)
    window.addEventListener('load', ()=> {
        let storeCache = sessionStorage.getItem("storeCache")
        if(storeCache){
            // 將session中的store數(shù)據(jù)替換到store中
            ctx.store.replaceState(JSON.parse(storeCache));
        }
    });
}

大功告成~

nuxt——讓store持久化，刷新頁面不清除store

我們有時候在項目中儲存的store數(shù)據(jù)只要一刷新頁面，數(shù)據(jù)就被清空了，在其他頁面加載的時候就獲取不到數(shù)據(jù)了，但是咱們又沒有辦法控制用戶不允許刷新頁面，所以咱們來解決了它

解決思路

就是利用瀏覽器的本地存儲，localStorage或者sessionStorage，監(jiān)聽頁面要離開或者刷新前，將store儲存到本地，下次進(jìn)入頁面的時候取出來重新賦值給store就可以了

代碼開發(fā)步驟

如下：

第一步：

我們在plugins文件中建立一個store-cache.js文件，在store-cache.js中添加以下代碼：

export default function(ctx) {
? //離開頁面 刷新前 將store中的數(shù)據(jù)存到localStorage
? window.addEventListener('beforeunload', () => {
? ? localStorage.setItem("storeCache", JSON.stringify(ctx.store.state))
? });
? // 獲取localStorage中的store數(shù)據(jù)
? let storeCache = localStorage.getItem("storeCache")
? if (storeCache) {
? ? // 將localStorage中的store數(shù)據(jù)替換到store中
? ? ctx.store.replaceState(JSON.parse(storeCache));
? }
}

第二步：

在nuxt.cofing.js中的plugins中將剛才創(chuàng)建的store-cache.js添加進(jìn)去，如下：

plugins: [
?? ?{src:'~/plugins/store-cache',ssr:false}
],

注意：

在添加的時候ssr一定要設(shè)置成false，ssr的作用是控制該文件是否在服務(wù)器端進(jìn)行加載，如果設(shè)置為true的話，這個js文件就會在服務(wù)器中直接運(yùn)行了，但是因為我們的js文件中需要用到windows對象，windows對象只有在客戶端，也就是咱們的瀏覽器中才會存在，直接在服務(wù)器中運(yùn)行的話，會報錯，因為找不到windows對象，所以我們需要設(shè)置為false，讓該js到了瀏覽器中后再加載運(yùn)行