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

1、 配置插件（）

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

 

注意：要禁止服務端運行，不然會報錯，這個事件是在客戶端添加的，不是在服務端小渲染的時候添加的。

2 。在plugins/storeCache.js

寫代碼，如下。

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

 

大功告成

。

 

 

 

 

。