Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

store.restored Promise resolves before the state is restored.

See original GitHub issue

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

restoreState: async (key, storage) => {
  const snapshot = await db

  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


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

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:5

github_iconTop GitHub Comments

softzer0commented, May 1, 2020

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

pjotre86commented, Apr 2, 2021

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


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

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

Add both plugins to nuxt.config.js

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

Hope it helps…

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to resolve a Promise only after a state change
You should check to see if promise is created when state changes. Keep in mind you can only invoke one of resolve/reject, and...
Read more >
Promise.race() - JavaScript - MDN Web Docs
A Promise that asynchronously settles with the eventual state of the first promise in the iterable to settle. In other words, it fulfills...
Read more >
How to repair the operating system and how to restore the ...
The computer restarts, and the system files and settings are returned to the state that they were in at the time that the...
Read more >
Why Refurbished - Apple
Read more on the Apple Refurbished promise. ... Shop all Refurbished products ... from Apple experts, so most issues can be resolved in...
Read more >
JavaScript Promise Tutorial – How to Resolve or Reject ...
The promise.then() call always returns a promise. This promise will have the state as pending and result as undefined .
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found