键在类型 'StoreOptions<State>' Vuex 4 + Vue 3 + Typescript 中不存在

Question

我想用 Typescript 和 Vue3 建立一个 Vuex 4 商店。我几乎没有使用打字稿的经验。

我按照 Vuex 教程进行了初始设置，几乎是复制粘贴。唯一不同的是，在我的 State 界面中，我有一个 Station.

类型的键

我收到这个错误

TS2345: Argument of type '{ station: {}; isOverlayActive: boolean; }' is not assignable to parameter of type 'StoreOptions<State>'.
  Object literal may only specify known properties, and 'station' does not exist in type 'StoreOptions<State>'.

这是我的Station界面

export default interface Station {
  uuid: string;
  name: string;
  teaser: {
    src: string;
    title: string;
  };
  event: {
    uuid: string;
    name: string;
    logo: {
      src: string;
      title: string;
    };
  };
  logo: {
    src: string;
    title: string;
  };
  theme: {
    mainColor: string;
    textColor: string;
  };
}

这是我的index.ts定义商店的地方，也是我得到错误的地方

import { InjectionKey } from "vue";
import { createStore, useStore as baseUseStore, Store } from "vuex";
import Station from "@/interfaces/station";

export interface State {
  station: Station;
  isOverlayActive: boolean;
}

export const key: InjectionKey<Store<State>> = Symbol();

export const store = createStore<State>({
  station: {}, // here the compiler shows the error
  isOverlayActive: false,
});

export function useStore(): Store<State> {
  return baseUseStore(key);
}

我认为 Station 不是问题所在，我也尝试在 Store 界面中设置 station: number 并在 [=23] 中设置 station: 0 =] 但我得到了同样的错误。

我做错了什么？目标是有一个类型化的商店。

Answer 1

在 createStore 函数中，您需要将其包装在属性 state.

中

https://vuex.vuejs.org/guide/typescript-support.html#simplifying-usestore-usage

而不是

export const store = createStore<State>({
  station: {}, // here the compiler shows the error
  isOverlayActive: false,
});

是

export const store = createStore<State>({
  state: {
    station: {},
    isOverlayActive: false,
  }
});

它仍然会抛出错误，因为 uuid、name 等未由 {} 定义，但那是另一个错误。

键在类型 'StoreOptions<State>' Vuex 4 + Vue 3 + Typescript 中不存在

key does not exsists in type 'StoreOptions<State>' Vuex 4 + Vue 3 + Typescript

types

typescript

vue.js

vuex

vuejs3