Постоянное состояние от VueX и NuxtJS

Question

Я использую пакет vuex-persistedstate ( https://github.com/robinvdvleuten/vuex-persistedstate) для сохранения состояния данных в браузере.

Я использую Adonuxt (смесь между NuxtJS и AdonisJS).

В действиях VueX у меня есть это действие:

nuxtClientInit ({commit}) {
      // I want get here state auth saved by persistedstate package
    }

Это действие вызывается плагином:

localstorage.js

export default async (context) => {
  await context.store.dispatch('nuxtClientInit', context)
}

Плагин nuxt.js (config)

{
      src: '~/plugins/localstorage.js',
      ssr: false
    }

Я хочу получить состояние, чтобы настроить Axios с токеном пользователя:

this.$axios.setToken(auth.jwt.token, 'Bearer')

У меня сложилось впечатление, что nuxtClientInit() вызывается до пакета persistedstate, поэтому state.auth имеет значение null, но может наблюдаться в консоли:

Answer 1

Я использовал https://www.npmjs.com/package/vuex-persist для сохранения данных из Vuex.

Answer 2

csr+ssr cookie

Вы можете выбрать любую из библиотек ниже

1.vuex-persistedstate

2.vuex-persist

использование vuex-persistedstate

https://www.npmjs.com/package/vuex-persistedstate

плагины / persistedstate.js

      import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
import cookie from 'cookie'

export default ({store, req, isDev}) => {
  createPersistedState({
      key: 'your_key',
      paths: ['state1', 'state2',...so_on],
      storage: {
        getItem: (key) => process.client ? Cookies.getJSON(key) : cookie.parse(req.headers.cookie||'')[key],
        setItem: (key, value) => Cookies.set(key, value, { expires: 365, secure: !isDev }),
        removeItem: (key) => Cookies.remove(key)
      }
  })(store)
}

nuxt.config.js

        plugins: [
      { src: '~plugins/persistedstate.js' }
    ]

vuex-persist

https://www.npmjs.com/package/vuex-persist

      // ~/plugins/vuex-persist.js
import * as Cookies from 'js-cookie'
import cookie from 'cookie'

import VuexPersistence from 'vuex-persist'

export default ({ store, req, isDev }) => {
  new VuexPersistence({
    key:'test',
    reducer: (state) => ({}),
    restoreState: (key, storage) =>process.client ? Cookies.getJSON(key) : cookie.parse(req.headers.cookie||'')[key],
    saveState: (key, state, storage) =>
    Cookies.set(key, value, { expires: 365, secure: !isDev }),

  }).plugin(store);
}

nuxt.config.js

       plugins: [
      { src: '~plugins/vuex-persist.js' }
    ]

Answer 3

В моем случае я ошибся при указании каталога.

      root/
　├ src/
　├ pages/
     .
     .
　├ src/
　 　└ plugins/
　 　　　└ localstorage.js/

В указанном выше каталоге необходимо указать следующее.

В nuxt.config.js

      {src:'~/src/plugins/localstorage.js', srr: false}