Как сохранять vuex стейт между переходами в nuxtjs?

В Nuxt.js, вы можете сохранить состояние Vuex между переходами с помощью сохранения состояния на стороне сервера (SSR) или с использованием локального хранилища (LocalStorage).

1. Сохранение состояния на стороне сервера (SSR):
SSR в Nuxt.js позволяет сохранять состояние Vuex на сервере при каждом переходе и восстанавливать его при загрузке страницы. Для этого вы можете использовать модуль @nuxtjs/axios и middleware, чтобы отправить состояние на сервер при каждом переходе и загрузить его обратно при загрузке страницы.

Давайте начнём с создания middleware функции для сохранения состояния:

// middleware/saveState.js
export default function ({ store }) {
  return function (to, from, next) {
    // Сохраняем состояние в localStorage
    localStorage.setItem('vuexState', JSON.stringify(store.state));
    next();
  }
}

Теперь добавьте этот middleware в конфигурацию маршрутизатора в своем файле nuxt.config.js:

// nuxt.config.js
export default {
  router: {
    middleware: ['saveState']
  }
}

Теперь вы можете получить сохраненное состояние из localStorage при загрузке страницы и восстановить его:

// store/index.js
export const state = () => ({
  // Восстанавливаем состояние из localStorage
  ...(localStorage.getItem('vuexState')
    ? JSON.parse(localStorage.getItem('vuexState'))
    : {})
})

export const mutations = {
  // Ваши мутации
}

2. Сохранение состояния в локальном хранилище (LocalStorage):
Если вам не требуется сохранение состояния на сервере, вы можете использовать локальное хранилище (LocalStorage) для сохранения состояния между переходами в Nuxt.js.

Для этого снова обновите ваши мутации в store/index.js, чтобы сохранять состояние в LocalStorage:

// store/index.js
export const state = () => ({
  // Восстанавливаем состояние из localStorage
  ...(localStorage.getItem('vuexState')
    ? JSON.parse(localStorage.getItem('vuexState'))
    : {})
})

export const mutations = {
  // Ваши мутации
  updateSomeValue(state, payload) {
    state.someValue = payload;
    // Сохраняем изменения в localStorage
    localStorage.setItem('vuexState', JSON.stringify(state));
  }
}

Теперь, при каждом обновлении состояния, оно будет сохраняться в локальном хранилище (LocalStorage), и при переходе на другую страницу состояние будет восстанавливаться из LocalStorage.

Управление состоянием в приложении Nuxt.js с помощью Vuex дает вам много возможностей для сохранения, изменения и восстановления состояния между переходами. Вы можете выбрать наиболее подходящий метод, который лучше всего соответствует вашим потребностям и требованиям приложения.