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?
CodePudding user response:
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, // ✅
})