How to make vuex store persist

folami

How to make vuex state persist after page reload/refresh …I tried using vuex-persistedstate but couldnt get it working

folami

can anyone help me with this? all my state clears on reload/refresh

lucasfernog

This question is not related to Quasar… also, we can’t help you if you don’t provide any information e.g. store code

metalsadman

@folami
using vuex-persistedstate, put this into your src/store/index.js:

import createPersistedState from 'vuex-persistedstate'
export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      commons
    },
    plugins: [createPersistedState()]
  })

  return Store
}

The line plugins: [createPersistedState()] is what you need to make it work it’s there at the guide https://github.com/robinvdvleuten/vuex-persistedstate#usage.

folami

@metalsadman said in How to make vuex store persist:

plugins: [createPersistedState()]
I have tried this approach but it doesn’t work with SSR

folami

@lucasfernog said in How to make vuex store persist:

This question is not related to Quasar… also, we can’t help you if you don’t provide any information e.g. store code

here is my code

import Vue from 'vue'
import Vuex from 'vuex'

import createPersistedState from 'vuex-persistedstate'
import cartModule from './cartModule'
import customer from './customer'
import contents from './contents'

Vue.use(Vuex)
export default function ({ ssrContext }) {
  const Store = new Vuex.Store({
    modules: {
      cartModule,
      customer,
      contents
    }
    plugins: [createPersistedState()]
  })
  return Store
}

folami

@folami said in How to make vuex store persist:

@lucasfernog said in How to make vuex store persist:

This question is not related to Quasar… also, we can’t help you if you don’t provide any information e.g. store code

here is my code
import Vue from 'vue'
import Vuex from 'vuex'

import createPersistedState from 'vuex-persistedstate'
import cartModule from './cartModule'
import customer from './customer'
import contents from './contents'

Vue.use(Vuex)
export default function ({ ssrContext }) {
  const Store = new Vuex.Store({
    modules: {
      cartModule,
      customer,
      contents
    }
    plugins: [createPersistedState()]
  })
  return Store
}

is there anything wrong with this code?

folami

found the problem! I was running the app on SSR mode but, When I disable SSR run SPA mode it works.
But I need for SSR mode because my app is suppose to be run on SSR mode…
I still need solution to this please

Tobias Mesquita

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)
}

folami

@Tobias-Mesquita
You just saved my a**…this is really cool
Thanks a bunch

jehadjaghoub

Hummm
boot/persist-auth.js
you will be in a big problem if its like above it will need to be modified for SSR
you will need to add path for cookie set other wise you will have diffrent cookie depend on where cookie was create
more info
https://quasar.dev/quasar-plugins/cookies#Option%3A-path
so i suggest to make

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
const options = { path: '/' }
  createPersistedState({
      paths: [...],
      storage: {
        getItem: key => JSON.stringify(cookies.get(key)),
        setItem: (key, value) => cookies.set(key, value, options),
        removeItem: key => cookies.remove(key)
      }
  })(store)
}

hope it will help

PeterQF

Sorry for asking a stupid question but what is paths: […], and why do i get eslint error in vscode?

metalsadman

@PeterQF Its just a placeholder … means insert your code or whatever there, in this case an array of string paths ie paths : ['somepath']. https://github.com/robinvdvleuten/vuex-persistedstate/blob/master/README.md

fogx

This post is deleted!

No More Posting New Topics!

How to make vuex store persist