When is the plugin ready to be used? about vuex-persist HOT 13 CLOSED

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

from vuex-persist.

I ended up using vuex-persistedstate which works as expected.

from vuex-persist.

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

from vuex-persist.

The problem has been resolved in v1.0

If the store is not async (you're using localStorage), then vuex-persist will synchrnously restore state and you won't feel like "The store is not immediately restored"

from vuex-persist.

Just a note if you are having this timing issue on production mode and is trying to use the subscribe trick.
As you will have strict set to false, the subscribe with RESTORE_MUTATION won't work.
That's because the store won't commit, but rather replace the state.

Look the code here:

@championswimmer Can we have some event emitted here to know when that has happened on production mode?

EDIT:
Based on #3 (comment),
I have made this to be notified when storage has been replaced:

import store from '@/store' //<-- your store module

export default new VuexPersistence({
  storage: localForage,
  strictMode: false,
  asyncStorage: true,
  restoreState: (key, storage) => {
    return new Promise(resolve => {
      storage
        .getItem(key)
        .then(data => {
          resolve(data);
          store._vm.$f7.emit('storageReady');
        })
    })
  },
  ...
});

from vuex-persist.

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

@kylewelsby Thank you !! this served me!

from vuex-persist.

Thanks @kylewelsby for the suggestion.

Seems overly complicated though since localStorage interactions are not async.

from vuex-persist.

from vuex-persist.

@championswimmer I've just tested out the changes in version 1.0 and it seems as though your fix for this behavior does not apply when using sessionStorage() instead of localStorage().
Would it be possible to make the two types of storage behave the same, sync way, or is there something that would prevent someone from doing that? It'd really helpe if sessionStorage() could also work this way.
Thanks for your work on this project :)

from vuex-persist.

Hi, thanks for this plugin 👍 using custom methods for the storage (setItem, getItem, etc) instead of localforage will fail unless the flag here is set too

from vuex-persist.

Tried this plugin with 1.0.0 and "The store is not immediately restored". Is there a fix of this in any of the new versions or do I implement a workaround?

from vuex-persist.

Tries this plugin with 1.1.5 and still the same issue. using @CosX workaround does help but only if the state is restored....so I have to check the regular way and via store events

created(){
      this.setFetching({fetching: true})
      this.$store._vm.$root.$on('storageReady', () => {
        this.setGameStates()
        this.setFetching({fetching: false})
      });
    },
    mounted() {
      this.setGameStates()
    }

from vuex-persist.

PR #107 is intended to address the issue raised by @rulrok. I've tested locally and found that I'm able to consistently get vuex-persist to restore the state before any other mutations are committed.

from vuex-persist.