Estoy tratando de descubrir cómo escribir módulos vuex en un proyecto de mecanografiado vue 3. La documentación oficial falta en esta área.
Supongamos que tengo un proyecto como este:
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); }... luego más tarde en un componente:
const apple = computed(() => store.state.fruit.apple); Cuando trato de acceder a Apple, no funciona porque arroja un error Property 'fruit' does not exist on type 'State'
Ahora SI hago algo como esto:
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); } E intente nuevamente, el error cambia a Object is possibly 'undefined'
Me permitirá acceder al módulo de frutas si uso el encadenamiento opcional ?.
Como en const apple = computed(() => store.state.fruit?.apple);
Pero esto no me parece aceptable ya que sé que fruit.apple en realidad no está indefinido.
¿Cuál es la forma correcta de incluir un módulo en sus tipos de estado para vuex?
No es necesario que haga que el estado de la fruit sea opcional en la interfaz de State :
export interface State { foo: string; //fruit?: FruitState; fruit: FruitState; }Según su comentario, estaba tratando de sortear este error de TypeScript al declarar el estado raíz (como se ve aquí ):
export const store = createStore<State>({ modules: { fruit: fruitModule }, state: { foo: 'foo' }, // ❌ Property 'fruit' is missing in type '{ foo: string; }' but required in type 'State'. })Utilice la aserción de tipo como solución alternativa:
export const store = createStore<State>({ modules: { fruit: fruitModule }, state: { foo: 'foo' } as State, // ✅ })