Persisted state from VueX and NuxtJS

Question

I use vuex-persistedstate package (https://github.com/robinvdvleuten/vuex-persistedstate) to persist data state on browser.

I use Adonuxt (a mix between NuxtJS and AdonisJS).

In VueX actions, I have this action:

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

This action is called by plugin:

localstorage.js

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

nuxt.js plugin (config)

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

I want get state to configure Axios with the user token:

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

I have the impression nuxtClientInit() is called before persistedstate package, so state.auth is null but it can observable in console:

Answer 1

I've used https://www.npmjs.com/package/vuex-persist to persist data from Vuex.

Answer 2

csr+ssr cookie

You can choose any one of the below library

1 .vuex-persistedstate

2 .vuex-persist

vuex-persistedstate usage

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

plugins/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

In my case, I made a mistake in specifying the directory.

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

In the above directory, you must specify as follows.

In nuxt.config.js

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