Incompatible localForage type

[udondan]

Imported localForage type is not compatible to what vuex-persist expects as storage. How's this meant to be used?

This code

const vuexLocal = new VuexPersistence({
  storage: localForage,
  asyncStorage: true,
});

cannot be compiled:

Type 'LocalForage' is not assignable to type 'Storage | AsyncStorage | undefined'.
Type 'LocalForage' is not assignable to type 'Storage'.
Types of property 'length' are incompatible.
Type '(callback?: ((err: any, numberOfKeys: number) => void) | undefined) => Promise' is not assignable to type 'number'.

Package versions:

• vuex-persist: 3.1.3
• localforage: 1.10.0

[tintin10q]

I am also wondering about this there is no example given.

[shamscorner]

If you see the error message, you can see the Type LocalForage is not assignable to type Storage | AsyncStorage | undefined. So that means it has to be one of these three types. LocalForage is asynchronous by its nature. Hence you have to typecast to AsyncStorage like below,

import VuexPersistence, { AsyncStorage } from 'vuex-persist';
. . .

const vuexLocal = new VuexPersistence<RootState>({
  storage: localForage as AsyncStorage,
  asyncStorage: true,
});