Javascript 如何在Nuxt.js存储中使用localStorage

我正在处理一个nuxt.js项目。在这里，我想在

nuxt-Store

中使用

localStorage

，还想从

nuxt中间件

访问

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')
}

}

---

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

在通用模式下，中间件将被称为服务器端（在第一次请求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应用程序或页面刷新时）和客户端（在导航到其他路由时）

解决这个问题的最简单方法是添加一个只在客户端上运行的插件。从问题开始，将此插件添加到您的

numxt.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')
  }
}

这个例子与枯燥的原则背道而驰，旨在作为解决Nuxt中间件局限性的一个例子

---

希望这有帮助

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

在通用模式下，中间件将被称为服务器端（在第一次请求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应用程序或页面刷新时）和客户端（在导航到其他路由时）

解决这个问题的最简单方法是添加一个只在客户端上运行的插件。从问题开始，将此插件添加到您的

numxt.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')
  }
}

这个例子与枯燥的原则背道而驰，旨在作为解决Nuxt中间件局限性的一个例子

---

希望这有帮助

您可以直接使用nuxtjs中的localStorage

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

---

查看文档

您可以直接使用nuxtjs中的localStorage

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

---

请查看文档

localStorage

是浏览器的本地存储，您无法在服务器端代码中访问它。这就是为什么您有

存储

。如果，我无法在服务器端使用。我可以从前端和中间件使用它吗？

localStorage

是浏览器的本地存储，您不能在服务器端代码中访问它。这就是为什么您有

存储

。如果，我无法在服务器端使用。我可以从前端和中间件使用它吗？您的解决方案使它工作，但在提交本地存储值以存储期间似乎有延迟。事实上，视图已加载，然后我们可以在0,5毫秒后看到插件完成设置要存储的值。没有任何代码示例，无法确定，但有几件事需要检查。首先，当你说“查看”时，你是指组件，还是仅仅指应用程序？组件总是在所有插件完成后加载。然而，如果你在插件中做任何异步的事情，你需要确保返回一个承诺，否则插件链不会等待。如果您的组件确实在插件完成之前加载，那么这可能就是您看到的。实际上，只有在客户端插件结束之前呈现的组件才是这样。在这个插件中，只有“localstorage.getitem”和“store.commit”没有其他内容。根据这一点，“plugins目录包含在实例化根Vue.js应用程序之前要运行的JavaScript插件”。你所描述的不是正确的行为。我建议用一个可重复性最低的示例来开始一个新问题。您的解决方案使它能够工作，但在提交本地存储值以存储期间似乎有延迟。事实上，视图已加载，然后我们可以在0,5毫秒后看到插件完成设置要存储的值。没有任何代码示例，无法确定，但有几件事需要检查。首先，当你说“查看”时，你是指组件，还是仅仅指应用程序？组件总是在所有插件完成后加载。然而，如果你在插件中做任何异步的事情，你需要确保返回一个承诺，否则插件链不会等待。如果您的组件确实在插件完成之前加载，那么这可能就是您看到的情况。事实上，只有组件在插件结束之前呈现