How to make vuex store persist



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



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



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



  • @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.



  • @metalsadman said in How to make vuex store persist:

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



  • @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 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?



  • 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🙏🏽 🙏🏽 🙏🏽 🙏🏽 🙏🏽 🙏🏽 🙏🏽 🙏🏽 🙏🏽 🙏🏽 🙏🏽



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


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


Log in to reply