javascript - Hvordan korrekt skrive vuex-moduler i vue 3 og typescript

Jeg prøver å finne ut hvordan man skriver typer for vuex-moduler i et Vue 3 TypeScript-prosjekt. Den offisielle dokumentasjonen mangler på dette området.

Anta at jeg har et prosjekt som dette:

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);
  }

... deretter senere i en komponent:

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

Når jeg prøver å få tilgang til apple, fungerer det ikke fordi det kaster feil Property 'fruit' does not exist on type 'State'

Nå HVIS jeg gjør noe sånt som dette:

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);
  }

Og prøv igjen, feilen endres til Object is possibly 'undefined'

Det vil tillate meg å få tilgang til fruktmodulen hvis jeg bruker den valgfrie kjedingen ?.

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

Men dette virker ikke akseptabelt for meg siden jeg vet at fruit.apple faktisk ikke er udefinert.

Hva er den riktige måten å inkludere en modul i tilstandstypene dine for Vuex?

Svar #1

Du trenger ikke å gjøre fruit-tilstanden valgfri i State-grensesnittet:

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

Basert på kommentaren din, prøvde du å omgå denne TypeScript-feilen når du erklærte roten til tilstanden (som sett her):

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

Bruk typepåstand som en løsning:

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

demo

Relaterte artikler