如何在Nuxt.js商店中使用本地存储 [英] How to use localStorage in Nuxt.js store

问题描述

我正在处理nuxt.js项目。在这里，我希望在Nuxt-Store内部使用localStorage，还希望从Nuxt-Middleware访问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')
}

}

推荐答案

为了仅在客户端运行此代码，您需要向中间件添加一些逻辑。请选中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中中间件的限制的示例。

希望这能有所帮助！

这篇关于如何在Nuxt.js商店中使用本地存储的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！