Как использовать localStorage в магазине Nuxt.js - PullRequest
Новая
       20

Как использовать localStorage в магазине Nuxt.js

1 голос
/ 29 сентября 2019

Я работаю над проектом nuxt.js. Здесь я хочу использовать localStorage внутри 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')
}

}

1 Ответ

1 голос
/ 29 сентября 2019

Чтобы запустить этот код на клиентской стороне только , вам необходимо добавить некоторую логику в ваше промежуточное ПО.Проверьте документы , чтобы узнать больше.

В универсальном режиме промежуточное ПО будет вызываться на стороне сервера один раз (при первом запросе к приложению 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 илипри обновлении страницы) и на стороне клиента при переходе к дальнейшим маршрутам

Самый простой способ обойти это - также добавить плагин, который запускается только на клиенте.Взятый из этой проблемы, добавьте этот плагин к вашему 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.

Надеюсь, это поможет!

...