将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,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,(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,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 |   }

auth是我的vuex模块，定义如下（稍后我将添加操作和变异，现在我要读取状态），这是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)
  }

}

这不是最好的解决方案，但它有效:)