클래스 스타일 구성 요소 sintax가 없는 형식 스크립트가 있는 vuex에서 mapGetter 및 mapMutation 사용

클래스 스타일 구성 요소 sintax가 없는 형식 스크립트가 있는 vuex에서 mapGetter 및 mapMutation 사용

저는 Vue와 함께 프로젝트를 만들었지만 정적인 유형이 없으면 약간 혼란스러워지기 시작합니다.프로젝트에 유형 스크립트를 추가했지만 "일반" 방법을 사용하여 코드를 작성하고 싶습니다(클래스 및 장식자 없음).

지금까지 모든 저장소를 유형 스크립트로 "일반" 방식으로 관리했지만 유형에서는 클래스 형식 구성 요소 없이 유형 스크립트를 사용하여 구성 요소에서 mapGetters, mapMutations 및 mapActions를 사용하려고 합니다.

import Vue from 'vue';
import { mapGetters, mapActions } from 'vuex';

export default Vue.extend({
  methods: {
    ...mapActions('pictures', ['toggleFavorite']),
    anotherMethodExample: (pictureId: number): void {
      this.toggleFavorite(pictureId); // This line returns an error described bellow.
    },
  },
});

반환된 오류:

Property 'toggleFavorite' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, { index: unknown; isSelected: unknown; getToggleFavorite: any; /* another methods*/; }, Readonly<{ picture: any; }>>'.

맵을 사용하는 방법Getters 및 mapActions를 사용하지 않고 사용할 수 있습니다.@Component방법? 저는 코드를 작성하는 이 "각형" 스타일을 정말 좋아하지 않습니다, 저는 공식 Vue 문서를 읽고 계속 업데이트하기 위해 "일반" 형식을 유지하는 것이 좋다고 생각합니다.

누가 도와줄 수 있어요?

감사합니다.

이 문제에 대한 해결책을 찾다가 이 질문을 발견했습니다.저는 몇 가지 실험을 했고, 해결책이 있다고 생각합니다.

여러분이 댓글을 통해 알아낸 것처럼, 근본적인 원인은 계산된 속성에 주석을 달 필요가 있다는 것입니다.그러나 스토어 모듈에서 매핑된 메소드를 주입할 때는 여전히 유형 안전성이 없습니다.

요령은 방법을 포장하는 것입니다.mapGetters그리고.mapActions유형 스크립트가 관련된 유형을 추론할 수 있도록 합니다.매퍼에 잘못된 키를 제공하면 컴파일 시간 오류가 발생하며, 보너스로 반환 유형이 정확해집니다(더 이상 없음).

// returns a type which skips the first context argument
type OmitActionContext<F> = F extends (
  context: ActionContext<any, any>,
  ...args: infer P
) => infer R
  ? (...args: P) => R
  : never;

// signature of action methods
type ActionMethod = (
  context: ActionContext<any, any>,
  ...args: any[]
) => Promise<any>;

// needs to be called with extra parenthesis to infer map keys correctly
// such as mapActionsNamespaced<TYPE>()(namespace, map)
function mapActionsNamespaced<
  S extends Record<keyof S & string, ActionMethod>
>(): <Map extends (keyof S & string)[]>(
  namespace: string,
  map: Map
) => {
  [K in Map[number]]: OmitActionContext<S[K]>;
} {
  return <Map extends (keyof S & string)[]>(namespace: string, map: Map) =>
    mapActions(namespace, map) as any;
}

위의 래퍼를 사용하면 페이로드와 Promise 반환 유형이 올바르게 추론됩니다.

보너스로, 만약 당신이 실수로 추가한다면.toggleFavorite컴파일 시 아래의 인텔리전트 에러가 발생합니다.

...mapActionsNamespaced<PictureModuleActions>()('pictures', ['toggleFavorites'])

전체 솔루션을 보려면 다음 요점을 참조하십시오.

언급URL : https://stackoverflow.com/questions/61566573/use-mapgetter-and-mapmutations-in-vuex-with-typescript-without-class-style-compo