如何在 Nuxt.js 商店中使用 localStorage答案

【问题标题】：How to use localStorage in Nuxt.js store如何在 Nuxt.js 商店中使用 localStorage
【发布时间】：2019-09-29 09:31:12
【问题描述】：

我正在开发一个 nuxt.js 项目。在这里，我想在 Nuxt-Store 中使用 localStorage，并且还想从 Nuxt-Middleware 访问 localStorage 值。它显示一个错误。

localStorage 未定义。

我该如何解决这个问题？

这里是store/index.js

的代码示例

setUser(state, { user }){
    state.user = user
    state.isLoggedIn = true
    localStorage.setItem('user', JSON.stringify(user));
    localStorage.setItem('isLoggedIn', state.isLoggedIn);
},

我的中间件代码在这里-

export default function({ store, redirect, route}) {
const user = localStorage.getItem('user');
const loggedStatus = store.getters['isLoggedIn']

if (user) {
    if(route.path == '/login' || route.path == '/user/temporary'){
        return redirect('/')
    } 
       return 
}


if(!user){
    return redirect('/login')
}

}

【问题讨论】：

localStorage 是浏览器的本地，您无法在服务器端代码中访问它。这就是为什么你有store。
如果，我无法在服务器端使用。我可以从前端和中间件使用它吗？

标签： javascript vuex nuxt.js

【解决方案1】：

为了仅在客户端运行此代码，您需要向中间件添加一些逻辑。查看docs 了解更多信息。

在通用模式下，中间件将在服务器端调用一次（在对 Nuxt 应用的第一次请求或页面刷新时），在导航到更多路由时在客户端调用。在 SPA 模式下，中间件将在第一次请求和导航到更多路由时被调用。

将以下内容添加到您的中间件函数中：

export default function({ store, redirect, route }) {

  // Do not run on server
  if (process.server) {
    return
  }

  const user = localStorage.getItem('user')
  const loggedStatus = store.getters['isLoggedIn']

  if (user) {
    if (route.path == '/login' || route.path == '/user/temporary') {
      return redirect('/')
    }
    return
  }

  if (!user) {
    return redirect('/login')
  }
}

如果您在 SPA 模式下运行，那么您就完成了。此中间件只会在每次加载、初始加载以及在页面之间导航时在客户端上运行。

现在，如果您在通用模式下运行，此中间件将不再在服务器上运行，但也不会在第一次加载应用程序时运行。

在通用模式下，中间件将在服务器端调用一次（在对 Nuxt 应用的第一次请求或页面刷新时）和在导航到更多路由时在客户端调用

解决此问题的最简单方法是添加一个仅在客户端上运行的插件。取自 this 问题，将此插件添加到您的 nuxt.config.js，注意添加 .client 后缀：

// nuxt.config.js
export default {
  plugins: [
    // .client will only be run client side on initial app load
    '~/plugins/init.client.js'
  ]
}

在这个插件中，您可以定义与您的中间件相同的逻辑：

// /plugins/init.client.js
export default function({ store, redirect, route }) {

  const user = localStorage.getItem('user')
  const loggedStatus = store.getters['isLoggedIn']

  if (user) {
    if (route.path == '/login' || route.path == '/user/temporary') {
      return redirect('/')
    }
    return
  }

  if (!user) {
    return redirect('/login')
  }
}

此示例违背了 DRY 原则，旨在作为解决 Nuxt 中中间件限制的示例。

希望这会有所帮助！

【讨论】：

您的解决方案使其工作，但似乎在提交本地存储值以存储期间存在延迟。事实上，视图被加载，然后我们可以在 0.5ms 后看到插件完成设置值以存储。
没有任何代码示例，无法肯定地说，但有几件事需要检查。首先，当您说“视图”时，您是指组件还是应用程序？组件总是在所有插件完成后加载。但是，如果您在插件中执行任何异步操作，则需要确保返回一个 Promise，否则插件链将不会等待。如果您的组件确实在插件完成之前加载，这可能就是您所看到的。
确实，只是在客户端插件结束前渲染的组件。在这个插件中，只有“localstorage.getitem”和“store.commit”没有别的
nuxtjs.org/docs/2.x/directory-structure/plugins 据此，“插件目录包含您要在实例化根 Vue.js 应用程序之前运行的 JavaScript 插件”。你所描述的不是正确的行为。我建议使用最少的可重现示例打开一个新问题。

【解决方案2】：

可以直接在nuxtjs中使用localStorage。

this.$auth.$storage.setLocalStorage(key, val)
this.$auth.$storage.getLocalStorage(key)
this.$auth.$storage.removeLocalStorage(key)

查看文档here

【讨论】：