将 mapState 与 typescript 结合使用

Question

我在 Vue 2 项目中使用 typescript，现在我需要第一次使用 Vuex 和 typescript。我根据在 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 |   }

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

Answer 1

有两种方法：

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

}

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