When is the plugin ready to be used?

Loading from localStorage seems immediate when the application starts, but when writing to the vuex store persistence doesn’t seem to work until some time has passed.

If I do this in root component the state in localStorage doesn’t change:

const root = new Vue({
	el: '#app',
	router,
	store,
	render: (h) => h(App),
	mounted () {
		store.commit('persistent/SET_TEST_VAR', true);
		console.log(store.state.persistent.test_var);
	}
});

If I do this instead it works fine:

setTimeout(() => {
	store.commit('persistent/SET_TEST_VAR', true);
	console.log(store.state.persistent.test_var);
}, 1000);

[kylewelsby]

I managed to find a workaround if you’re using VueRouter

Given you have the strict RESTORE_MUTATION setup;

// ./store/index.js
import VuexPersistPatch from './plugins/vuex-persist-patch'

export default new Vuex.Store({
  mutations: Object.assign(mutations, {
    RESTORE_MUTATION: vuexLocal.RESTORE_MUTATION
  }),
  plugins: [
    vuesLocal.plugin,
    VuexPersistPatch()
  ]
})

// ./plugins/vuex-persist-patch.js
export default function vuexPersistPatch () {
  return store => {
    store._vm.$root.$data['vue-persist-patch-delay'] = true

    store.subscribe(mutation => {
      if (mutation.type === 'RESTORE_MUTATION') {
        store._vm.$root.$data['vue-persist-patch-delay'] = false

        store._vm.$root.$emit('storageReady')
      }
    })
  }
}

Take special note to using store._vm to receive the event from the bus.

// ./router/index.js
import store from '../store'

router.beforeEach((to, from, next) => {
  if (store._vm.$root.$data['vue-persist-patch-delay']) {

    // Hold the request, until the Storage is complete.
    store._vm.$root.$on('storageReady', () => {
      next({path: to.path, query: to.query, params: to.params})
    })
  } else {
    // YOUR OTHER RULES GO HERE
  }
})

[CosX]

Thank you @PierBover. I managed to do this with localforage inspired by your plugin.

//first define a plugin that emits when the state has been persisted
const vuexPersistEmitter = () => {
    return store => {
        store.subscribe(mutation => {
            if (mutation.type === 'RESTORE_MUTATION') {
                store._vm.$root.$emit('storageReady');
            }
        });
    }
};

//I only needed to define strict mode here and not in the store.
const vuexLocal = new VuexPersistence({
    strictMode: true,
    asyncStorage: true,
    storage: localforage
});

export default new Vuex.Store({
   ...,
    mutations: {
        RESTORE_MUTATION: vuexLocal.RESTORE_MUTATION
    },
    plugins: [
        vuexLocal.plugin,
        vuexPersistEmitter()
      ]
});

And then in any kind of component:

const app = new Vue({
    store,
    ...App,
    mounted() {
        const self = this;
        self.$store._vm.$root.$on('storageReady', () => {
            self.$store.dispatch('somethingThatDependsOnTheStateBeingFilled');
        });
    }
});