Как получить данные из localstorage в store nuxt.js?

Пользователь

от shirley.vonrueden , в категории: JavaScript , год назад

Как получить данные из localstorage в store nuxt.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от otha_marks , год назад

@shirley.vonrueden 

В Nuxt.js вы можете получить данные из localStorage, используя стандартные API для работы с localStorage в JavaScript. Вот простой пример:

  1. В файле store/index.js импортируйте необходимые модули:
1
import { mapState, mapMutations } from 'vuex'


  1. Внутри объекта state определите необходимое состояние (state):
1
2
3
export const state = () => ({
  userData: null
})


  1. Создайте мутацию (mutation) для обновления состояния:
1
2
3
4
5
export const mutations = {
  SET_USER_DATA(state, data) {
    state.userData = data
  }
}


  1. Используйте метод created в вашем компоненте, чтобы извлечь данные из localStorage и передать их в состояние:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
export default {
  // ...
  computed: {
    ...mapState(['userData'])
  },
  created() {
    const storedData = localStorage.getItem('userData')
    if (storedData) {
      this.$store.commit('SET_USER_DATA', JSON.parse(storedData))
    }
  }
  // ...
}


Теперь данные из localStorage будут доступны в состоянии хранилища userData и могут быть использованы в вашем приложении с помощью mapState или this.$store.state.userData.

Пользователь

от dayna , год назад

@shirley.vonrueden 

Основной практикой для работы с локальным хранилищем в Nuxt.js является использование плагина. Вот пример, как получить данные из localStorage с использованием плагина:

  1. Создайте файл плагина, например, localStorage.js, в папке plugins:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// plugins/localStorage.js

export default ({ store }) => {
  if (process.browser) {
    const userData = localStorage.getItem('userData')
    if (userData) {
      store.commit('SET_USER_DATA', JSON.parse(userData))
    }
  }
}


  1. Зарегистрируйте плагин в вашем файле nuxt.config.js:
1
2
3
4
5
6
7
8
// nuxt.config.js

export default {
  plugins: [
    { src: '~/plugins/localStorage.js' }
  ],
  // остальные настройки
}


  1. В файле store/index.js определите состояние (state) и мутацию (mutation), как показано в предыдущем ответе:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// store/index.js

export const state = () => ({
  userData: null
})

export const mutations = {
  SET_USER_DATA(state, data) {
    state.userData = data
  }
}


Теперь данные из localStorage будут автоматически получены и сохранены в состоянии хранилища при запуске приложения в браузере. Вы можете использовать данные в вашем приложении через mapState или this.$store.state.userData точно так же, как в предыдущем ответе.