如何在 Nuxt js 中访问 asyncData 中的 localStorage

【问题标题】：How to get access localStorage inside asyncData in Nuxt js如何在 Nuxt js 中访问 asyncData 中的 localStorage
【发布时间】：2022-01-12 05:57:51
【问题描述】：

我尝试在 asyncData 中访问 localStorage，但结果是“localStorage 未定义”

asyncData(){
     if(localStorage.getItem("myCat")){
        alert(localStorage.getItem("myCat"));
        return;
      }
     
   }

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

除了 Jakub Záruba 的回答之外，如果您仍然需要在 asyncData 中访问 localStorage，您可以像这样修改您的 if-statement：

if (process.client && localStorage.getItem("myCat")) {
  alert(localStorage.getItem("myCat"))
  
  return
}

所以您将只在客户端运行这段代码。

【讨论】：

【解决方案2】：

localStorage 未定义，因为 asyncData() 在 SSR 时已在服务器上解析。只有客户端浏览器才能访问变量localStorage。

请参阅文档：https://nuxtjs.org/docs/features/data-fetching/。您可以在钩子mounted()、created() 等中使用localStorage...

【讨论】：