Vuex-persistedstate: Problem loading state with localForage

[jerometremblay]

I configured vuex-persistedstate two different ways:

1. The default way with localStorage. Everything works great.
2. Using localForage. The data is correctly saved in the local IndexedDB, but it is not loaded on page reload. Am i missing something?

  import Vue from 'vue'                                                                                                                                                                                  
  import Vuex from 'vuex'                                                                                                                                                                                
  import createPersistedState from 'vuex-persistedstate'                                                                                                                                                 
  import * as localforage from 'localforage'                                                                                                                                                             
  import settings from './modules/settings'                                                                                                                                                              

  Vue.use(Vuex)                                                                                                                                                                                          

  const debug = process.env.NODE_ENV !== 'production'                                                                                                                                                    

  export default new Vuex.Store({                                                                                                                                                                        
    plugins: [createPersistedState({storage: localforage.createInstance({name: 'bayonet'})})],                                                                                                           
    modules: {                                                                                                                                                                                           
      settings                                                                                                                                                                                           
    },                                                                                                                                                                                                   
    strict: debug                                                                                                                                                                                        
  })                                                                                                                                                                                                     

Thank you

[robinvdvleuten]

@jerometremblay could you try to implement the get / set methods yourself instead of just passing the localForage instance? See the fiddle here => https://jsfiddle.net/robinvdvleuten/meoLa716/

[robinvdvleuten]

@jerometremblay as you can read in the localForage documentation their getters and setters work with promises or callbacks. The storage instance passed to the vuex-persistatedstate plugin must be synchronous handling these getters and setters.

[gijo-varghese]

@robinvdvleuten so there is no way to use localforage with vuex-persistedstate? I can't use sessionstorage/localstorage/cookies because I need to store data more than 10MB

[zwarag]

@robinvdvleuten Sorry for digging up an old thread but I'm quite interested.
giro-varghese asked if it is impossible to use localforage with vuex-persistedstate.
I would much appreciate your estimate on any reasons why this could not work. Because if it is possible, in a sense that it is technologically compatible without hacking, I might give it a go.
I'm at a point where I should be able to write such a plugin but unable to judge if it is 'right' to do so.

[robinvdvleuten]

@zwarag as I explained in my comment above, the getters and setters of this plugin are synchronous and localForage uses asynchronous getters and setters. There is no way to make the getters / setters of this plugin async because they rely on the synchronous handling of state by Vuex.

[stephenjason89]

@robinvdvleuten Thank you for the great work. I am just a bit confused as to why it won't work? Isn't this the exact scenario where async / await should do the trick?

Looking forward to your response.