Question

以前使用Vuex时，我能够将枚举值用作我的操作和突变的函数名称，如下所示：

// ./store/modules/test/actions.ts

import { Actions } from '@/store';
import { ActionTree } from 'vuex';

export default ActionTree<any,any>{
  [Actions.TEST_ACTION](){
    console.log('in action');
  }
}

但是在课堂上尝试这样做：

// ./store/modules/test.ts

import { Actions } from '@/store';
import { Action, Module, VuexModule } from 'vuex-module-decorators';

@Module
export default class Test extends VuexModule {

  @Action
  public async [Actions.TEST_ACTION](): Promise<void> {
    console.log('in action');
  }
}

我得到了错误：

Cannot read property 'TEST_ACTION' of undefined
    at eval (test.ts?f2af:4)
// Same line as 'export default class Test extends VuexModule'

我的编辑器（vscode）中没有错误，没有任何尝试调用此函数的操作（没有调用分派的操作），并且正在导出Actions枚举：

export enum Actions {
  TEST_ACTION = 'testAction'
}

如果我改为执行以下操作，我将不再收到错误：

@Action
public async testAction(): Promise<void> {
  console.log('in action');
}

更新：如果枚举位于同一文件中，则没有错误：

// ./store/modules/test.ts

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

export enum Actions {
  TEST_ACTION = 'testAction'
}

@Module
export default class Test extends VuexModule {

  @Action
  public async [Actions.TEST_ACTION](): Promise<void> {
    console.log('in action');
  }
}

虽然可行，但并不理想。这可能是webpack问题吗？

枚举值作为类函数名称

0 个答案: