如何在 vue 3 和 typescript 中正确输入 vuex 模块

Question

我试图弄清楚如何在 vue 3 typescript 项目中输入 vuex 模块。这方面缺乏官方文档。

假设我有一个这样的项目：

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

...然后在组件中：

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

当我尝试访问苹果时它不起作用，因为它抛出错误 Property 'fruit' does not exist on type 'State'

现在如果我做这样的事情：

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

然后重试，错误变为Object is possibly 'undefined'

如果我使用可选链接，它将允许我访问水果模块?.

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

但这对我来说似乎不能接受，因为我知道 Fruit.apple 实际上不是未定义的。

在 vuex 的状态类型中包含模块的正确方法是什么？

Answer 1

您不需要fruit在State界面中使状态可选：

\n

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

\n

根据您的评论，您在声明根状态时试图解决此 TypeScript 错误（如此处所示）：

\n

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

\n

使用类型断言作为解决方法：

\n

export const store = createStore<State>({\n  modules: {\n    fruit: fruitModule\n  },\n  state: { foo: \'foo\' } as State, // \xe2\x9c\x85\n})\n

\n

演示

\n