How to correctly type vuex modules in vue 3 and typescript

Question

I am trying to figure out how to type vuex modules in a vue 3 typescript project. The official documentation is lacking in this area.

Assume I have a project like this:

import { createStore, useStore as baseUseStore, Store } from 'vuex';
import { InjectionKey } from 'vue';

interface FruitState  {
    apple: boolean,
    peach: boolean,
    plum: boolean
}

const FruitModule = {
    namespaced: true,
    state: (): FruitState => ({
      apple: true,
      peach: false,
      plum: true
    }),
    mutations: {},
    action: {}
}


export interface State {
    foo: string;
  }
  
  export const key: InjectionKey<Store<State>> = Symbol();
  
  export const store = createStore<State>({
      modules: {
        fruit: fruitModule
      },
      state: {foo: 'foo'},
      mutations: { 
        changeFoo(state: State, payload: string){
            state.foo = payload
        }
      },
      actions: { 
        setFooToBar({commit}){
         commit('changeFoo', 'bar')
      }}
  })

  export function useStoreTyped() {
    return baseUseStore(key);
  }
  

... then later in a component:

  const apple = computed(() => store.state.fruit.apple);

When I try to access apple it does not work because it throws error Property 'fruit' does not exist on type 'State'

Now IF I do something like this:

import { createStore, useStore as baseUseStore, Store } from 'vuex';
import { InjectionKey } from 'vue';

interface FruitState  {
    apple: boolean,
    peach: boolean,
    plum: boolean
}

const FruitModule = {
    namespaced: true,
    state: (): FruitState => ({
      apple: true,
      peach: false,
      plum: true,
    }),
    mutations: {},
    action: {}
}


export interface State {
    foo: string;
    fruit?: FruitState;
  }
  
  export const key: InjectionKey<Store<State>> = Symbol();
  
  export const store = createStore<State>({
      modules: {
        fruit: fruitModule
      },
      state: {foo: 'foo'},
      mutations: { 
        changeFoo(state: State, payload: string){
            state.foo = payload
        }
      },
      actions: { 
        setFooToBar({commit}){
         commit('changeFoo', 'bar')
      }}
  })

  export function useStoreTyped() {
    return baseUseStore(key);
  }

And try again, the error changes to Object is possibly 'undefined'

It will allow me let me access the fruit module if I use the optional chaining ?.

As in const apple = computed(() => store.state.fruit?.apple);

But this doesn't seem acceptable to me since I know that fruit.apple is actually not undefined.

What's the correct way to include a module in your state types for vuex?

Answer 1

You don't need to make the fruit state optional in the State interface:

export interface State {
  foo: string;
  //fruit?: FruitState; 
  fruit: FruitState;
}

Based on your comment, you were trying to get around this TypeScript error when declaring the root state (as seen here):

export const store = createStore<State>({
  modules: {
    fruit: fruitModule
  },
  state: { foo: 'foo' }, // ❌ Property 'fruit' is missing in type '{ foo: string; }' but required in type 'State'.
})

Use type assertion as a workaround:

export const store = createStore<State>({
  modules: {
    fruit: fruitModule
  },
  state: { foo: 'foo' } as State, // ✅
})

demo