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

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

от craig.emmerich , в категории: JavaScript , 8 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от jerrold_langworth , 7 месяцев назад

@craig.emmerich 

Для получения данных из localStorage в store на Nuxt.js можно использовать middleware и метод localStorage.getItem(). Вот пример реализации:

  1. Создайте middleware в папке middleware вашего проекта:
1
2
3
4
5
6
7
8
9
// middleware/getLocalStorageData.js
export default function ({ store }) {
  if (process.browser) {
    const data = localStorage.getItem('myData')
    if (data) {
      store.commit('setData', JSON.parse(data))
    }
  }
}


  1. Зарегистрируйте middleware в nuxt.config.js:
1
2
3
4
5
6
7
8
// nuxt.config.js
export default {
  // ...
  router: {
    middleware: ['getLocalStorageData']
  },
  // ...
}


  1. Создайте мутацию setData в вашем store:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// store/index.js
export const state = () => ({
  data: null
})

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


Теперь данные, сохраненные в localStorage под ключом myData, будут загружены в store при каждом переходе на новую страницу. Обратите внимание, что process.browser используется для проверки того, что код выполняется в браузере, так как localStorage не доступен на стороне сервера.