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

@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.

@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 точно так же, как в предыдущем ответе.