store.restored Promise resolves before the state is restored.

Here’s the restoreState function that retrieves some data from Firebase based on localStorage wishlistId

restoreState: async (key, storage) => {
  const snapshot = await db
    .ref(`wishlist/${storage.wishlistId}`)
    .once('value');

  const data = snapshot.val();

  console.log('restoring', data);

  return {
    wishlist: {
      ids: data.ids || [],
    },
  };
},

Here’s the beforeEnter route callback.

beforeEnter: async (to, { params }, next) => {
  console.log('before restore');
  await store.restored;
  console.log('after restore');

  // ... sone additional logic

  next();
},

I would expect the messages to be logged in the following order:

• before restore
• restoring
• after restore

But the messages are logged in this order:

• before restore
• after restore
• restoring

---

As a result, the router redirects to a route before the state is restored. I have asyncStorage set to true

[softzer0]

Having the same problem here as @nwittwer, but without Nuxt - store.restored is always undefined. Is there some fix or workaround for this?

[pjotre86]

I had the same problem. It started working with the following setup (in nuxt):

vuex-persist.js

import VuexPersistence from 'vuex-persist'
import localforage from 'localforage'

export default ({ store }) => {
      new VuexPersistence({
        key: 'your-key',
        storage: localforage,
        asyncStorage: true, // THIS SEEMS TO BE IMPORTANT FOR localforage, with window.localstorage it also worked without it
    }).plugin(store);
}

waitForStore.js - this is basically the adaption of the vuex-persist authors recommendation for nuxt

export default function ({store, app}) {
    const waitForStorageToBeReady = async (to, from, next) => {
        await store.restored
        next()
    }
    app.router.beforeEach(waitForStorageToBeReady);
}

Add both plugins to nuxt.config.js

plugins: [
    { src: '~/plugins/vuex-persist', ssr: false }, '~/plugins/waitForStore'
  ]

Hope it helps…