Question

我正在研究利用LocalStorage的Nuxt JS应用程序。在SPA模式下编译时，它可以正常运行，但是我需要将项目切换到universal模式下，以使我的SEO元标题和说明在生成项目时正常工作，切换后，我在一些利用LocalStorage的页面：

localStorage is not defined

有没有人建议解决此问题？

Answer 1

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

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

Nuxt.js在后台使用Vue SSR。

但是，您仍然有一家商店（Vuex）。并且它将在节点和浏览器之间同步。

Answer 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
  }
}

Nuxt JS LocalStorage在通用模式下不起作用

2 个答案: