folami, there isn’t hard to make vuex-persistedstate
to work in a SSR application, but first u need to understand a couple of things.
1 - LocalStorage and Session Storage isn’t avaliable at server-side, since it’s running on NodeJS.
So if u are persisting u stores in a WebStorage, so u need to ensure than that will happen only on the client-side, boot files can help u to do that.
quasar new boot persist-client
quasar.config.js
boot: [
...,
{ path: 'persist-client', server: false }
]
boot/persist-client.js
import createPersistedState from 'vuex-persistedstate'
export default async ({ app, router, store, Vue }) => {
// window.setTimeout is needed to ensure than data will be rehydrated in the client-side, i know, that is ugly and don't make sense.
window.setTimeout(() => {
createPersistedState({
paths: [...]
})(store)
}, 0)
}
but remember, that states will not be available at server-side, so try not persist data who will be needed in your server-side while booting or preFetching your pages.
2 - So, what i can to do with sensitive data like jwt tokens? who need to be stored in the client and the server needs that.
In that case u can persist you state in a Cookie, but remember, u can’t store alot of data inside a cookie, and that will be send to the server in each request.
quasar new boot persist-auth
quasar.config.js
boot: [
...,
'persist-auth'
]
boot/persist-auth.js
import { Cookies } from 'quasar'
import createPersistedState from 'vuex-persistedstate'
export default async ({ app, router, store, Vue }) => {
const cookies = process.env.SERVER
? Cookies.parseSSR(ssrContext)
: Cookies
createPersistedState({
paths: [...],
storage: {
getItem: key => JSON.stringify(cookies.get(key)),
setItem: (key, value) => cookies.set(key, value),
removeItem: key => cookies.remove(key)
}
})(store)
}