vuex-module-decorators的@MutationAction中访问state的TS报错如何解决

方案1：使用具体类型断言替代any #

这个方案不需要修改现有代码结构，用自定义State接口代替any做类型断言，完全符合类型安全要求：

1. 先声明和你当前模块状态完全匹配的接口

interface CountriesState {
  countries: unknown;
  baseUrl: string;
}

2. 在访问state前先做类型窄化：

@MutationAction
async getCountries(): Promise<unknown> {
  const state = this.state as CountriesState
  const countries = await axios.get(state.baseUrl)
  return { countries }
}

方案2：拆分Action和Mutation（更推荐，无需任何类型断言） #

你遇到的this.baseUrl运行时返回undefined的问题，本质是@MutationAction装饰器修改了方法内部的this指向导致的。将异步逻辑和状态修改逻辑拆分成标准的@Action和@Mutation，即可直接通过类属性访问状态，TS类型推断完全正常，无编译报错：

import { Module, Action, Mutation, VuexModule } from 'vuex-module-decorators';
import axios from 'axios';

@Module({ namespaced: true, name: 'countriesStore' })
export default class CountriesStore extends VuexModule {
  countries: unknown = {}
  baseUrl = "/api/countries"

  @Mutation
  SET_COUNTRIES(payload: unknown) {
    this.countries = payload
  }

  @Action
  async getCountries() {
    // 此处this指向类实例，TS可正常识别baseUrl类型，运行时也能正常取值
    const countries = await axios.get(this.baseUrl)
    this.SET_COUNTRIES(countries)
  }
}

内容的提问来源于stack exchange，提问作者Inbar Azulay