如何访问NuxtJs商店中的localStorage？

Question

我正在尝试从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;
  }
}

我要解决这个问题错了吗？还是不应该这样做？任何帮助表示赞赏。

Answer 1

尝试这样：

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

问题在于，当nuxt在服务器端时，您尝试访问localstorage。您需要检查process.server是否在服务器端。返回true或false。

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

此处：https://nuxtjs.org/faq/window-document-undefined/

Answer 2

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

要解决此问题，您可以在已安装的组件挂钩上分派操作。

mounted() {

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

Answer 3

我可以看到您尚未设置任何本地存储。请通过

设置本地存储

localstorage.setItem（）