В Nuxt.js приложении store обнуляется при каждой смене страницы. Как это избежать?

В Nuxt.js, по умолчанию, store сбрасывается при каждой смене страницы. Это происходит потому, что при каждом запросе сервер отправляет новую версию приложения на клиент. Однако, в некоторых случаях, вам может понадобиться сохранять данные в store между переходами между страницами.

Если вы хотите избежать сброса store при каждой смене страницы, вы можете воспользоваться пакетом "vuex-persistedstate". Он позволяет сохранять состояние вашего store в localStorage или cookie на клиентской стороне, чтобы ваши данные сохранялись при перезагрузке страницы.

1. Установите пакет "vuex-persistedstate" в вашем Nuxt.js проекте:

npm install vuex-persistedstate

2. Создайте файл ~/plugins/vuex-persistedstate.js:

import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
  createPersistedState({
    key: 'your-key' // Укажите уникальный ключ для сохранения данных в localStorage или cookie
  })(store)
}

3. В файле nuxt.config.js добавьте плагин vuex-persistedstate в раздел plugins:

plugins: [
  { src: '~/plugins/vuex-persistedstate.js', ssr: false }
],

После завершения этих шагов, store вашего приложения будет сохраняться в localStorage или cookie каждый раз, когда данные в store изменяются. При перезагрузке страницы данные будут восстановлены и доступны в store.

Обратите внимание, что использование "vuex-persistedstate" может привести к незначительному увеличению объема данных, отправляемых на клиент. Также, если вы храните конфиденциальные данные, не забудьте принять соответствующие меры безопасности для их хранения, например, шифрование.