typescript와 함께 mapState 사용

typescript와 함께 mapState 사용

저는 Vue 2 프로젝트에서 활자본을 사용하고 있는데, 현재 활자본을 처음 사용하는 Vuex를 사용해야 합니다.SOF나 블로그에서 찾은 답변을 바탕으로 작성했는데 오류가 발생하여 어떻게 수정해야 할지 모르겠습니다.

코드는 다음과 같습니다.

@Component({
  computed: {
    ...mapState('auth', {
      isUserAuthenticated: (state: AuthState) => state.auth.isUserAuthenticated
    })
  }
})
export default class App extends Vue {
  isUserAuthenticated!: boolean;
  drawer?: boolean = undefined;
  navItems: Array<object> = [
    { title: 'Home', icon: 'mdi-home' },
  ];
}

이 에러가 표시됩니다.

41:8 No overload matches this call.
  Overload 1 of 6, '(namespace: string, map: string[]): { [x: string]: Computed; }', gave the following error.
    Argument of type '{ isUserAuthenticated: (state: AuthState) => any; }' is not assignable to parameter of type 'string[]'.
      Object literal may only specify known properties, and 'isUserAuthenticated' does not exist in type 'string[]'.
  Overload 2 of 6, '(namespace: string, map: Record<string, string>): { [x: string]: Computed; }', gave the following error.
    Type '(state: AuthState) => any' is not assignable to type 'string'.
  Overload 3 of 6, '(namespace: string, map: Record<string, (this: CustomVue, state: unknown, getters: any) => any>): { [x: string]: () => any; }', gave the following error.
    Type '(state: AuthState) => any' is not assignable to type '(this: CustomVue, state: unknown, getters: any) => any'.
      Types of parameters 'state' and 'state' are incompatible.
        Type 'unknown' is not assignable to type 'AuthState'.
    39 | @Component({
    40 |   computed: {
  > 41 |     ...mapState('auth', {
       |        ^
    42 |       isUserAuthenticated: (state: AuthState) => state.auth.isUserAuthenticated
    43 |     })
    44 |   }

authvuex 모듈은 다음과 같이 정의되어 있습니까(나중에 액션과 돌연변이를 추가합니다.이제 상태를 읽으려고 합니다), 이것은modules/auth/store/index.ts:

import state from './state';

export default new Vuex.Store({
  state
});

그리고.state.ts파일:

export interface AuthState {
  isUserAuthenticated: boolean;
}

export const state: AuthState = {
  isUserAuthenticated: true
};

export default state;

그리고 이것은 루트 파일이며 모든 모듈을 등록합니다./store/index.ts

import auth from '@/modules/auth/store';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: { auth }
});

두 가지 방법이 있습니다.

// src > store > user.ts

const userInfo: IAuthUserInfo = {
  id: 0,
  firstName: '',
  lastName: '',
};

const state = {
  token: '',
  refreshToken: '',
  userInfo,
};

type TMapState<T> = Partial<Record<keyof T, (state: T) => T[keyof T]>>

{

  computed: {
    ...mapState<any, TMapState<UserState>>('auth', {
      // will be suggestion with 'userInfo' | 'refreshToken' | 'token'
      userInfo: state => state.userInfo,
    }),
  },

  created() {
    // this.userInfo can be IAuthUserInfo | string
    console.warn((this.userInfo as IAuthUserInfo).id)
  }

}

type TMapState = Partial<{
  userInfo: (state: UserState) => IAuthUserInfo
}>

{

  computed: {
    ...mapState<any, TMapState>('auth', {
      // suggestion inside mapState will not shown without Partial in TMapState 
      userInfo: state => state.userInfo,
    }),
  },

  created() {
    console.warn(this.userInfo.id)
  }

}

이것은 최적인 솔루션은 아니지만 효과가 있습니다.

언급URL : https://stackoverflow.com/questions/63737671/use-mapstate-with-typescript