背景
vuex-module-decorators
を使用し、Actionを宣言しました。
AuthStore.ts
@Action
public async addUser(params: loginParams) {
// API呼び出し
await ApiService.addUser(params.email, params.password);
// 以下省略
}
それを、APIからエラーが返るような呼び出し方をすると、
このようなエラーが出ました。
Error: ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access this.someMutation() or this.someGetter inside an @Action?
That works only in dynamic modules.
If not dynamic use this.context.commit("mutationName", payload) and this.context.getters["getterName"]
原因
vuex-module-decoratorでは、Action内で発生したオリジナルのエラーを投げることができる
rawError
という設定が、デフォルトでfalseとなっています。
その為、Actions内でエラーを投げようとしても、
それが呼び出し元に届いていないということでした。
対処
ActionにrawErrorを設定します
@Action{( rawError: true })
public async addUser(params: loginParams) {
// API呼び出し
await ApiService.addUser(params.email, params.password);
// 以下省略
}
もしくは、ファイルの頭で設定を行い、全体にrawErrorを設定してしまいます。
import { config } from 'vuex-module-decorators';
config.rawError = true;
参考