type of store state not working with modules

Question

I want to use modules for a vuex (^4.0.2) store that should work with typescript. So I just started to out like that:

import {createStore, Module} from 'vuex';


type RootState = {
  appID: string
}

type SessionState = {
  lastSeen: number
}

const session: Module<SessionState, RootState> = {
  state: () => ({ lastSeen: -Infinity })
}

const store = createStore<RootState>({
  state: () => ({appID: 'r2d2'}),
  modules: {
    session
  }
});

const s2 = store.state.session;

But that yields this error:

Property 'session' does not exist on type 'RootState'.

The docs suggest that the state of each module is included within the state of the store and using this:

//@ts-ignore
console.log(store.state.session)

show that the module is included.

How should types be setup to properly reflect the state?

Answer 1

The only "solution" I found to get typing :

import {createStore, Module} from 'vuex';

type SessionState = {
  lastSeen: number;
}

type RootState = {
  appID: string;
  session?: SessionState; // added here
}

const session: Module<SessionState, RootState> = {
  state: () => ({ lastSeen: -Infinity })
}

const store = createStore<RootState>({
  state: () => ({appID: 'r2d2'}),
  modules: {
    session
  }
});

const s2 = store.state.session; // typed as SessionState

It works but it is pretty inconvenient, and weird...
I didn't found any other though. (I searched a lot...)
Any better solution is welcome

edit:
I think this issue might be helpful : https://github.com/vuejs/vuex/issues/1689

edit2:

Well previous link was not really usefull.
I found a better solution than the code above:

• https://qdmana.com/2021/09/20210914103352881Q.html

edit3 : Well edit 2, not that great.

• https://github.com/vuejs/vuex/issues/1831