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

@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 не доступен на стороне сервера.