通用模式下的 Nuxt JS LocalStorage 不起作用答案

【问题标题】：Nuxt JS LocalStorage in Universal mode not working通用模式下的 Nuxt JS LocalStorage 不起作用
【发布时间】：2019-05-22 15:07:48
【问题描述】：

我正在开发一个使用 LocalStorage 的 Nuxt JS 应用程序。在SPA 模式下编译时，它可以正常运行，但是我需要将我的项目切换到universal 模式以在生成我的项目时让我的 SEO 元标题和描述正常工作，切换后我在几个使用的页面上出现错误本地存储：

localStorage is not defined

有人有解决这个问题的建议吗？

【问题讨论】：

Ofc 不工作，localstorage 只存在于浏览器的客户端，obv 不存在于节点
window.localStorage 怎么样？显示部分代码

标签： vue.js vuejs2 nuxt.js

【解决方案1】：

你没有 localStorage 因为在 Node.js 环境中没有这样的东西。您也没有 window 和 document 对象。

https://ssr.vuejs.org/guide/universal.html#access-to-platform-specific-apis

Nuxt.js 在后台使用 Vue SSR。

但是，您仍然有一个商店 (Vuex)。并且会在节点和浏览器之间同步。

【讨论】：

【解决方案2】：

我需要数据在 GDPR 的会话之间保持不变。您可以使用挂载的生命周期事件并等待 window.localStorage 可用。然后将其分配给数据属性并在包装器标记中添加 v-if，以便在 localeStorage 可用之前页面不会开始呈现。我正在使用静态 nuxt 构建：

<div v-if="localStorageReady">
    Awesome stuff here...
</div>

data() {
  return {
    localStorageReady: false,
  }
},

mounted() {
  if (window.localStorage) {
    this.localStorageReady = true
  }
}

【讨论】：