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 🙏🏾



  • 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 🙂



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



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


Log in to reply