TypeError: Property 'restored' does not exist on type 'Store<State>'.ts(2339)

[SeyyedKhandon]

As the docs say we should use await store.restored; in the router guard when we use localforage, everything is working, but the is an error which says Property 'restored' does not exist on type 'Store<State>'.ts(2339)

const waitForStorageToBeReady = async (
  _to: Route,
  _from: Route,
  next: NavigationGuardNext
) => {
  await store.restored;
  next();
};
router.beforeEach(waitForStorageToBeReady);

Further info:

import Vue from "vue";
import Vuex, { Payload } from "vuex";
import appConfig, { AppConfig } from "./modules/appConfig";
// import createPersistedState from "vuex-persistedstate";
import VuexPersistence, { AsyncStorage } from "vuex-persist";
import localForage from "localforage";
import SecureLS from "secure-ls";
import securityOptions from "@/store/securityOptions";

export interface State {
  appConfig: AppConfig;
}

const ls = new SecureLS(securityOptions);
Vue.use(Vuex);

const vuexLocalForage = new VuexPersistence({
  storage: localForage as AsyncStorage,
  asyncStorage: true
});

export default new Vuex.Store<State>({
  modules: {
    appConfig
  },
  plugins: [vuexLocalForage.plugin]
});

How can we fix this?

[efenderbosch]

I know this question is pretty old, but for anyone else that stumbles upon it this is what I did:

const beforeEach = async (to: Route, from: Route, next: NavigationGuardNext): Promise<void> => {
  // vuex-persist adds the restored property dynamically, wait for it so that state is ready
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  await (store as any).restored
  next()
}

[shamscorner]

I know this question is pretty old, but for anyone else that stumbles upon it this is what I did:

const beforeEach = async (to: Route, from: Route, next: NavigationGuardNext): Promise<void> => {
  // vuex-persist adds the restored property dynamically, wait for it so that state is ready
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  await (store as any).restored
  next()
}

Is it ok to use any? Can I use a specific type? What that type would be?

[robzen]

you may define your own type like:

type AsyncStorage = VuexStore<StateInterface> & { restored: Promise<boolean> }

and then use it:

await (store as AsyncStorage).restored