如何访问 NuxtJs 商店中的 localStorage？答案

【问题标题】：How do I access localStorage in store of NuxtJs?如何访问 NuxtJs 商店中的 localStorage？
【发布时间】：2020-10-28 13:23:29
【问题描述】：

我正在尝试从 localStorage 中获取一个值以确定存储中变量的值。我记得大约一年前用 vuejs 尝试过类似的东西，它似乎奏效了。我对 Reactjs 也没有任何问题。但由于某种原因，我在 Nuxt 中做同样的事情时不断收到这个错误

这是我的 user.js 文件

export const state = () => ({
  isLoggedIn: !!localStorage.getItem('userDetails')
})

export const mutations = {
  login(state) {
    state.isLoggedIn = true;
  },
  logout(state) {
    window.localStorage.clear()
    state.isLoggedIn = false;
  }
}

我在处理这个问题时错了吗？或者这不应该工作？任何帮助表示赞赏。

【问题讨论】：

你在做ssr吗？
我相信是的。我是否必须将应用程序重新创建为 PWA 才能正常工作？但后来我会放弃ssr。还有另一种解决方法吗？或重新创建为 PWA 是解决此问题的唯一方法。
@Roj 我添加了一个新答案来解决 SSR 问题

标签： javascript vue.js vuex nuxt.js

【解决方案1】：

试试这样：

isLoggedIn: process.server ? '' : !!localStorage.getItem('userDetails')

问题是您尝试访问本地存储，而 nuxt 在服务器端。如果您在服务器端，则需要与process.server 核对。它返回真或假。

我没有测试过，但是使用这个三元运算符它应该可以工作。

这里：https://nuxtjs.org/faq/window-document-undefined/

【讨论】：

这次没有错误。看来问题与ssr有关。我可能不得不重做整个项目并禁用 ssr。还是谢谢。
@Roj 没有错误意味着您可以访问本地存储。好吧，如果您想禁用 ssr 并且只使用客户端，您可以转到 nuxt.config.js 并将 mode: "universal" 重命名为 mode: "spa"

【解决方案2】：

我可以看到你没有设置任何本地存储。请通过

设置本地存储

localstorage.setItem()

【讨论】：

这不是问题

【解决方案3】：

当您使用 SSR 时，您无权访问浏览器存储。

要解决此问题，您可以在已安装的组件挂钩上调度一个操作。

mounted() {

 if(!process.client) return;
 const savedData = localStorage.getItem("userDetails");
 if(savedData){
    this.$store.commit('myMutation',savedData)
}
}

【讨论】：

谢谢，我会试试这个。有没有办法在基础应用程序本身上提交我的突变？
你应该把它包装在一个 if 语句中 if(process.client) {}
Roj，你可以用同样的方法，在mounted() 钩子中。 @ifaruki，是的，我的只是指示要走的路的一种方式，但是您是对的。我编辑了我的答案
那不是我的意思。它将再次抛出错误 localStorage 未定义。您需要将所有内容包装在if(process.client)

【解决方案4】：

对于从 Google 来到这里的人，我编写了一个插件，可以让您在不禁用 SSR 的情况下执行此操作。

https://www.npmjs.com/package/nuxt-vuex-localstorage-sync

【讨论】：